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

网络编程 2024/12/27 佚名

3 2 1

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="/UploadFiles/2021-04-02/001.jpg">

二是写入到<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="/UploadFiles/2021-04-02/002.jpg">

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="/UploadFiles/2021-04-02/003.jpg">

.js文件内容如下：


//js代码
//找到XX元素，一般给元素加id 
yuansuojb=document.getElementById('yuansu');    
//给xx元素加事件
yuansuojb.onclick=function(){
  //代码段
  var str="hello world !!!";
  alert(str);
}


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

                                
                                
                                    js,HTML,引用 
                                
                                    标签：
                                        js,HTML,引用

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“js在HTML的三种引用方式详解”

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

暂无“js在HTML的三种引用方式详解”评论...

更新动态

2024年12月27日

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

js,HTML,引用

JS访问对象两种方式区别解析

toString.call()通用的判断数据类型方法示例

评论“js在HTML的三种引用方式详解”

更新动态

友情链接