温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-09-17 23:17:45 来源:脚本之家 阅读:200 作者:NotFoundObject 栏目:开发技术

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

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI