js在HTML的三种引用方式详解
程序员文章站
2022-06-28 22:31:43
1.内联样式内联样式分为两种，一是直接写入元素的标签内部 js样式内联写法
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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 佛跳墙里面有什么材料？惊！居然这么多！
下一篇： 馒头要发酵多久时间最好