您的位置:首页技术文章
文章详情页

js在HTML的三种引用方式详解

【字号: 日期:2024-04-23 09:36:33浏览:12作者:猪猪

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='https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/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='https://www.haobala.com/bcjs/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);}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持好吧啦网。

标签: JavaScript
相关文章: