如何详细解释HTML中JavaScript的三种引用方式？

2026-04-01 14:522阅读0评论SEO教程

内容介绍
文章标签
相关推荐

本文共计491个文字，预计阅读时间需要2分钟。

1. HTML 结构分为两种内联样式，一种是直接写入元素的标签内，如：

1.内联样式

内联样式分为两种，一是直接写入元素的标签内部

<html> <title>js样式内联写法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body>   <div class="img"> 单击事件： <img src="images/001.jpg" onclick="alert(1223)"></img> </div>  </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>  <div class="img"> 单击事件： <img src="images/002.jpg" id='yuansu'></img> </div>  </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); }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：三种引用方式详解内联