脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js HTML引用

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

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

您可能感兴趣的文章:

相关文章

  • 微信小程序实现获取准确的腾讯定位地址功能示例

    微信小程序实现获取准确的腾讯定位地址功能示例

    这篇文章主要介绍了微信小程序实现获取准确的腾讯定位地址功能,结合实例形式详细分析了微信小程序使用腾讯地理位置接口的相关注册、操作步骤及接口使用技巧,需要的朋友可以参考下
    2019-03-03
  • 小程序视频列表中视频的播放与停止的示例代码

    小程序视频列表中视频的播放与停止的示例代码

    本篇文章主要介绍了小程序视频列表中视频的播放与停止的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • javascript之函数进阶详解

    javascript之函数进阶详解

    这篇文章主要为大家介绍了javascript函数进阶，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助<BR>
    2021-12-12
  • 通过网页查看JS源码中汉字显示乱码的解决方法

    通过网页查看JS源码中汉字显示乱码的解决方法

    这篇文章给大家主要介绍了通过网页查看JS源码的时候，发现汉字显示是乱码的解决方法，文中通过图文详解的介绍了解决的步骤，详细会对大家很有帮助，有需要的朋友们下面来一起看看吧。
    2016-10-10
  • js实现上传图片预览方法

    js实现上传图片预览方法

    这篇文章主要为大家详细介绍了js实现上传照片预览的方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 如何用js获取当前域名、Url、相对路径和参数

    如何用js获取当前域名、Url、相对路径和参数

    这篇文章主要给大家介绍了关于如何用js获取当前域名、Url、相对路径和参数的相关资料,用Javascript可以单独获取当前域名、Url相对路径和参数,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 在微信小程序中使用mqtt服务的方法

    在微信小程序中使用mqtt服务的方法

    这篇文章主要介绍了在微信小程序中使用mqtt服务的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • ES6 关键字 let 和 ES5 及关键字 var 的区别解析

    ES6 关键字 let 和 ES5 及关键字 var 的区别解析

    var可以穿透控制语句、条件语句这样的作用域，导致变量冲突经常发生，这篇文章主要介绍了ES6 关键字 let 和 ES5 及关键字 var 的区别,需要的朋友可以参考下
    2022-09-09
  • 详解Nuxt.js 实战集锦

    详解Nuxt.js 实战集锦

    这篇文章主要介绍了Nuxt.js 实战集锦,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-07-07

最新评论