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); } |