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

更新时间：2020年08月29日 10:27:02 作者：NotFoundObject

这篇文章主要介绍了js在HTML的三种引用方式详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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

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

您可能感兴趣的文章:

JS实现控制表格行文本对齐的方法
这篇文章主要介绍了JS实现控制表格行文本对齐的方法,涉及javascript操作表格样式的相关技巧,需要的朋友可以参考下
2015-03-03
js实现贪吃蛇小游戏（容易理解）
本文主要介绍了js实现贪吃蛇小游戏的步骤与方法，代码简单，容易理解。具有很好的参考价值，下面跟着小编一起来看下吧
2017-01-01
浅谈js原生拖放
下面小编就为大家带来一篇浅谈js原生拖放。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
js 模拟实现类似c#下的hashtable的简单功能代码
越来越感觉js对集合的处理没有c#强大。比如在实际开发中，经常用到在一维数组或者二维数组里取某一个满足某些条件的项，通常的处理方式就是遍历数组，对比条件，匹配就取出，然后结束循环。
2010-01-01
JavaScrip常见的一些算法总结
这篇文章主要介绍了JavaScrip常见的一些算法总结的相关资料,需要的朋友可以参考下
2015-12-12
原生JS实现翻书特效
这篇文章主要为大家详细介绍了原生JS实现翻书特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
js的Boolean对象初始值示例
Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）下面为大家介绍下js的Boolean对象初始值
2014-03-03
JavaScript实现HSL拾色器
这篇文章主要为大家详细介绍了JavaScript实现HSL拾色器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-05-05
微信小程序slider组件使用详解
这篇文章主要为大家详细介绍了微信小程序slider组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
JavaScript中apply与call的用法意义及区别说明
JavaScript中有一个call和apply方法，其作用基本相同，但也有略微的区别。
2010-04-04