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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
本文向大家介绍iconfont的三种使用方式详解，包括了iconfont的三种使用方式详解的使用技巧和注意事项，需要的朋友参考一下 在我们项目中经常要使用到iconfont，在此我们使用阿里巴巴矢量库提供的icon图标，此图标库足够为我们提供大量的图标，我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号，并且新建一个项目，这个项目包含了你所有要用到的图标。我们需要选中需要的图标放到自己的项目中
-
本文向大家介绍CodeIgniter中使用cookie的三种方式详解，包括了CodeIgniter中使用cookie的三种方式详解的使用技巧和注意事项，需要的朋友参考一下 cookie在php程序设计中应用十分广泛，本文所述CodeIgniter中使用cookie主要有以下三种方式，读者可以根据自身项目需求酌情采用。 第一种方式：采用php原生态的方法设置的cookie的值 第二种方式：通过CI框
-
本文向大家介绍Service Activity的三种交互方式(详解)，包括了Service Activity的三种交互方式(详解)的使用技巧和注意事项，需要的朋友参考一下 service有两种类型： 本地服务（Local Service）：用于应用程序内部 远程服务（Remote Sercie）：用于android系统内部的应用程序之间 前者用于实现应用程序自己的一些耗时任务，比如查询升级信息，并
-
本文向大家介绍Spring Bean三种注入方式详解，包括了Spring Bean三种注入方式详解的使用技巧和注意事项，需要的朋友参考一下 在Spring容器中为一个bean配置依赖注入有三种方式： 使用属性的setter方法注入 这是最常用的方式； 使用构造器注入； 使用Filed注入（用于注解方式）. Field注入是最常见的一种方式，可以采用 @Autowired 对Bean类的接口
-
本文向大家介绍详解SpringBoot工程的三种搭建方式，包括了详解SpringBoot工程的三种搭建方式的使用技巧和注意事项，需要的朋友参考一下 SpringBoot的主要目的是简化配置文件，通过少量配置即可运行Java程序，其强大的自动配置功能帮助开发者轻松实现配置装配，通过引入SpringBoot的 starter 就能实现想要的功能，不需要额外的配置。 目前SpringBoot工程有三种搭
-
本文向大家介绍详解tensorflow载入数据的三种方式，包括了详解tensorflow载入数据的三种方式的使用技巧和注意事项，需要的朋友参考一下 Tensorflow数据读取有三种方式： Preloaded data: 预加载数据 Feeding: Python产生数据，再把数据喂给后端。 Reading from file: 从文件中直接读取 这三种有读取方式有什么区别呢？ 我们首先要知道Te