js在HTML中的三种写法

Posted NotFoundObject

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js在HTML中的三种写法相关的知识,希望对你有一定的参考价值。

1.内联样式

内联样式分为两种,一是直接写入元素的标签内部

<html>
	<title>js样式内联写法</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	<body>
	<!--js内联写法01开始-->
       <!--当鼠标点击图片时跳出弹窗显示1223-->
		<div class="img">
		单击事件:
			<img src="images/001.jpg" onclick="alert(1223)"></img>
		</div>
	<!--js内联写法01结束-->
	</body>
</html>

 二是写入到<script></script>标签中

给元素添加id

通过getElementById(‘XX‘);方法定位到该元素,给该元素添加触发事件

注意:<script></script>标签应该放在</body>之后

<html>
	<title>js样式内联写法</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	<body>
	<!--js内联写法02开始-->	
	<div class="img">
		单击事件:
			<img src="images/002.jpg" id=‘yuansu‘></img>
	</div>
	<!--js内联写法02结束-->
	</body>
	<script>
		//js代码
		//找到XX元素,一般给元素加id	
		yuansuojb=document.getElementById(‘yuansu‘);		
		//给xx元素加事件
		yuansuojb.onclick=function(){
			//代码段
			alert(1);
		}
		//触发事件
	</script>
</html>

 2.外联样式

将js的代码写到.js的文件中,并在HTML中引用

.html文件内容如下:

<html>
	<title>js样式外联写法</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
	<body>
	<div class="img">
		外联写法--单击事件:
			<img src="images/003.jpg" id=‘yuansu‘></img>
	</div>
	</body>
	<script src=‘js/index.js‘></script>
</html>

 .js文件内容如下:

//js代码
//找到XX元素,一般给元素加id	
yuansuojb=document.getElementById(‘yuansu‘);		
//给xx元素加事件
yuansuojb.onclick=function(){
	//代码段
	var str="hello world !!!";
	alert(str);
}

 

以上是关于js在HTML中的三种写法的主要内容,如果未能解决你的问题,请参考以下文章

Python 判断变量是否是 None 的三种写法

JSON的三种格式

JSON的三种格式

js中的三种对话框

Egret中的三种单例写法

js中的事件绑定的三种方式