js在html中的三种写法

1.内联样式

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

1 2 3 4 5 6 7 8 9 10 11 12 13

< 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');方法定位到该元素，给该元素添加触发事件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

< 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文件内容如下：

1 2 3 4 5 6 7 8 9 10 11

< 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文件内容如下：

1 2 3 4 5 6 7 8 9

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

转载于:https://www.cnblogs.com/liangdong/p/9682859.html