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 相关文章推荐
HTML中事件触发列表与解说
Jul 09 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
jQuery实现复选框批量选择与反选的方法
Jun 17 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序个人中心的列表控件实现代码
Apr 26 Javascript
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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
PHP中用接口、抽象类、普通基类实现“面向接口编程”与“耦合方法”简述
2011/03/23 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
javascript SocialHistory 检查访问者是否访问过某站点
2008/08/02 Javascript
JavaScript Distilled 基础知识与函数
2010/04/07 Javascript
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
javascript学习指南之回调问题
2016/04/23 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
vue实现长图垂直居上 vue实现短图垂直居中
2017/10/18 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
微信小程序实现留言板
2018/10/31 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
[43:41]OG vs Newbee 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
Python编程之基于概率论的分类方法:朴素贝叶斯
2017/11/11 Python
Pycharm以root权限运行脚本的方法
2019/01/19 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
印尼穆斯林时尚购物网站:Hijabenka
2016/12/10 全球购物
结婚典礼证婚词
2014/01/08 职场文书
2014年元旦活动方案
2014/02/15 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
加入学生会演讲稿
2014/04/24 职场文书
促销活动总结
2014/04/28 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
合同纠纷调解书
2015/05/20 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS