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中的三种写法的主要内容,如果未能解决你的问题,请参考以下文章