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

2024-09-30 02:02:36

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

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

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

先看看JS+CSS+HTML实现"代码雨"类似黑客帝国文字下落最终效果: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/ok.css" rel="external nofo
JavaScript实现字符串与HTML格式相互转换

代码:: 1.将字符转换成Html function encodeHtml(str){ var encodedStr = "" ; if (str=="") return encodedStr ; else { for (var i = 0 ; i < str.length ; i ++){ encodedStr += "&#" + str.substring(i, i + 1).charCodeAt().toString(10)
javascript实现移动端 HTML5 图片上传预览和压缩功能示例

本文实例讲述了javascript实现移动端 HTML5 图片上传预览和压缩功能.分享给大家供大家参考,具体如下: 在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个API file 和 FileList 对象 file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后
如何使用php脚本给html中引用的js和css路径打上版本号

在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css.js等,而不必从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约一下你的服务器流量. 具体文字说明不给大家多说了,下面通过代码实例给大家讲解. 比如 <link rel="stylesheet" type="text/css&quo
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

本文实例讲述了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作.分享给大家供大家参考,具体如下: 1.先给json格式的数据: [ {"id":1,"name":"stan"}, {"id":2,"name":"jack"}, {"id":3,"name":"lucy"}, {"id&quo
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题

解决方法如下所示: <script type="text/javascript"> function showImg(url) { var frameid = 'frameimg' + Math.random(); window.img = '<img id="img" style="width: 100%;height: auto" src=\'' + url + '?' + Math.random() + '\' />
spring boot 2.x html中引用css和js失效问题及解决方法

在application.properties中配置了static的默认路径我的static目录结构是这样的 index.html中这样引用css或者js文件,用到了th标签 html使用th标签需要先导入以上这样配置好了之后发现网页的css和js果然加载出来了. 自定义拦截器失效在自定义拦截器注册之后发现静态资源被拦截了,注释掉拦截器发现果然是拦截器的问题. 在注册方法上使用了excludePathPatterns()排除静态资源的拦截,发现该方法失效了,查看源码WebMvcConfig
基于JS+HTML实现弹窗提示是否确认提交功能

需求:当点击input按钮时候,弹出确认框,确认后提交到指定url,效果如下分析:这里面要,引入三个库文件,如下是下载地址 layui样式文件:https://layer.layui.com/ layer弹窗组件:https://www.layui.com/ jquery代码库:http://www.jq22.com/ 代码:下载后放入响应的项目目录,最后代码如下 <!DOCTYPE html> <html> <head> <meta charset="
js在HTML的三种引用方式详解

1.内联样式内联样式分为两种,一是直接写入元素的标签内部 <html> <title>js样式内联写法</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <body>   <div cla
Python selenium 三种等待方式详解(必会)

很多人在群里问,这个下拉框定位不到.那个弹出框定位不到-各种定位不到,其实大多数情况下就是两种问题:1 有frame,2 没有加等待.殊不知,你的代码运行速度是什么量级的,而浏览器加载渲染速度又是什么量级的,就好比闪电侠和凹凸曼约好去打怪兽,然后闪电侠打完回来之后问凹凸曼你为啥还在穿鞋没出门?凹凸曼分分中内心一万只羊驼飞过,欺负哥速度慢,哥不跟你玩了,抛个异常撂挑子了. 那么怎么才能照顾到凹凸曼缓慢的加载速度呢?只有一个办法,那就是等喽.说到等,又有三种等法,且听博主一一道来: 1. 强制等待
vue路由传参三种基本方式详解

这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r
Java spring的三种注入方式详解流程

目录设置Spring的作用域自动注入 @Primary Qualifier @ComponentScan不同的配置对性能的影响懒加载三种注入方式字段注入(IDEA 会提示不推荐) 字段注入的bean类外部不可见循环依赖问题构造器注入(官方推荐) set方法注入设置Spring的作用域或者使用枚举值设置单例和多里使用场景自动注入 @Primary 一个接口有多个实现被spring管理吗,在依赖注入式,spring会不知道注入哪个实现类就会抛出NoUniqueBeanDefin
python自动化测试selenium核心技术三种等待方式详解

目录 1 使用python自带模块time的sleep方式 2 隐式等待(implicitly_wait) 3 显示等待(WebDriverWait) UI自动化测试过程中,可能会出现因测试环境不稳定.网络慢等情况,如果不做任何处理的话,会出现无法定位到特定元素而报错,导致自动化测试无法顺利执行. selenium官网手册:Waits | Selenium slenium自动化测试中,主要涉及三种等待方式: 1 使用python自带模块time的sleep方式缺点:即使网络条件较好时,依旧按照
Spring中Bean的三种实例化方式详解

目录一.环境准备二.构造方法实例化三.分析Spring的错误信息四.静态工厂实例化 4.1 工厂方式创建bean 4.2 静态工厂实例化五.实例工厂与FactoryBean 5.1 环境准备 5.2 实例工厂实例化 5.3 FactoryBean的使用六.bean实例化小结一.环境准备准备开发环境创建一个Maven项目 pom.xml添加依赖 resources下添加spring的配置文件applicationContext.xml 最终项目的结构如下: 二.构造方法实例化在
iconfont的三种使用方式详解

在我们项目中经常要使用到iconfont,在此我们使用阿里巴巴矢量库提供的icon图标,此图标库足够为我们提供大量的图标,我们首先需要的事在阿里巴巴矢量图标库新建一个自己的账号,并且新建一个项目,这个项目包含了你所有要用到的图标.我们需要选中需要的图标放到自己的项目中,并下载下来放到自己项目下的iconfont文件夹之下.(需要更新图标时,下载包也需要重新下载更新) 方式一:使用symbol方式(本质是用svg标签构成的) 第一步:为了代码更好的复用,我们封装一个svg-icon组件,代码如下:
oracle中if/else的三种实现方式详解

1.标准sql规范 1.单个IF IF v=... THEN END IF; 2.IF ... ELSE IF v=... THEN ELSE t....; END IF; 3.多个IF IF v=... THEN ELSIF v=... THEN t...; END IFL 注意: 多个IF的是'ELSIF' 不是 ' ELSE IF' 2.decode函数 DECODE(VALUE,IF1,THEN1,IF2,THEN2,IF2,THEN2,..,ELSE) 表示如果value等于if1时,
Spring Bean三种注入方式详解

在Spring容器中为一个bean配置依赖注入有三种方式: 使用属性的setter方法注入这是最常用的方式: 使用构造器注入: 使用Filed注入(用于注解方式). Field注入是最常见的一种方式,可以采用 @Autowired 对Bean类的接口进行初始化,代码如下 @ContextConfiguration({"/META-INF/spring/amazing-base.xml"}) @RunWith(SpringJUnit4ClassRunner.class) public
Android编程中沉浸式状态栏的三种实现方式详解

本文实例讲述了Android编程中沉浸式状态栏的三种实现方式.分享给大家供大家参考,具体如下: 沉浸式状态栏 Google从android kitkat(Android 4.4)开始,给我们开发者提供了一套能透明的系统ui样式给状态栏和导航栏,这样的话就不用向以前那样每天面对着黑乎乎的上下两条黑栏了,还可以调成跟Activity一样的样式,形成一个完整的主题,和IOS7.0以上系统一样了. 首先看下效果首先看下第一种方式系统的方式沉浸式状态栏实现步奏一 //当系统版本为4.4或者4.4以上

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

相关推荐

随机推荐