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');方法定位到该元素,给该元素添加触发事件
注意:<script></script>标签应该放在</body>之后
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/soulsjie/p/7634553.html