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


Posted in Javascript onAugust 29, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 实现的全选和反选
Apr 15 Javascript
jquery 事件对象属性小结
Apr 27 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
javascript计算星座属相(十二生肖属相)示例代码
Jan 09 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
浅谈javascript中的Function和Arguments
Aug 30 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
Vue使用鼠标在Canvas上绘制矩形
Dec 24 Vue.js
toString.call()通用的判断数据类型方法示例
Aug 28 #Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 #Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 #jQuery
Node在Controller层进行数据校验的过程详解
Aug 28 #Javascript
Postman无法正常返回结果问题解决
Aug 28 #Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
Aug 28 #Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 #Javascript
You might like
PHP的Yii框架的基本使用示例
2015/08/21 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
JS 自动安装exe程序
2008/11/30 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
移动Web中图片自适应的两种JavaScript解决方法
2015/06/18 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
捕获未处理的Promise错误方法
2017/10/13 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
js实现蒙版效果
2020/01/11 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
跟老齐学Python之开始真正编程
2014/09/12 Python
Python卸载模块的方法汇总
2016/06/07 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python实现数据分析与建模
2019/07/11 Python
Python实现TCP通信的示例代码
2019/09/09 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
python使用matplotlib绘制折线图的示例代码
2020/09/22 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
世界顶级足球门票网站:Live Football Tickets
2017/10/14 全球购物
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
幼儿教师国培感言
2014/02/19 职场文书
法人委托书范本
2014/04/04 职场文书
就业协议书怎么填
2014/04/11 职场文书
创业女性典型材料
2014/05/02 职场文书
家长建议怎么写
2014/05/15 职场文书
台风停课通知
2015/04/24 职场文书
公司仓库管理制度
2015/08/04 职场文书
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server