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