前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >点击改变图片的2种方法 原

点击改变图片的2种方法 原

作者头像
tianyawhl
发布于 2019-04-04 08:39:10
发布于 2019-04-04 08:39:10
7300
举报
文章被收录于专栏:前端之攻略前端之攻略

<script> function changeImage() {     element=document.getElementById('myimage')     var src =element.getAttribute("src")     if (src==="/images/pic_bulbon.gif")      {         element.setAttribute("src","/images/pic_bulboff.gif")           }     else    {           element.setAttribute("src","/images/pic_bulbon.gif");    } } </script> <img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"> 或者js如下: <script> function changeImage() {     element=document.getElementById('myimage')     if (element.src.match("bulbon"))   //element.src.match("bulbon")如果能匹配到 返回一个数组,if(true) 执行下面的,返回数组就说明(里面的内容为true)      {           element.src="/images/pic_bulboff.gif";       }     else    {           element.src="/images/pic_bulbon.gif";    } } </script>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/08/30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
JavaScript 简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
陈不成i
2021/07/15
3730
JavaScript 笔记总结(一)
脚本可同时位于 HTML 的 和 两个部分,通常的做法是把函数放入 部分,或者放在页面底部。这样就可以把它们放在同一处位置,不会干扰页面的内容
宸寰客
2020/07/13
9610
JavaScript笔记(13)
就比如这个轮播图,当我们选择了特定的元素时样式才会改变,而其他的不变,返回原来的状态
y191024
2022/09/20
5800
JavaScript笔记(13)
JS学习之路之JavaScript match() 方法
match() 方法,在字符串内找到相应的值并返回这些值,()内匹配字符串或者正则表达式。
Happy、Liu
2019/04/24
1.1K0
Canvas之使用图片 原
canvas有比较强的图片操作能力。可以用于动态的图像合成或者作为图形的背景。浏览器支持任意格式如PNG、GIF、或者JPEG,你甚至可以将同一个页面中的其他canvas元素生成的图片作为图片源(toDataURL("image/png"),canvas.toDataURL('image/jpeg', quality))
tianyawhl
2019/04/04
1.1K0
Canvas之使用图片
                                                                            原
优化谷歌联盟广告JS加载缓慢问题,提高网站页面的加载速度
早上跟彧繎博主聊天,看到他博客有一篇优化谷歌联盟js优化的文章,因为谷歌在国内尴尬的局面,在网页加载js的时候可能会比较拖拉,然后他又给我了一篇关于优化谷歌联盟js的文章,然后看了下自己网站的加载速度,果然谷歌js加载的速度真的很慢,加速最慢的已经达到了6.19s,另外两个十秒+应该是图片资源,可以暂时忽略。虽说我的网站打开速度不是很快,但是不能这么拖拉啊,是该整顿整顿啦,网站还有百度联盟的广告,但是速度不至于这么拖拉,而且百度的也该下架了,基本没有什么收益,广告太局限了,这一点来说真的不如谷歌,如图,看看吧,就是着速度,嗖嗖地。。。
李洋博客
2022/04/01
4K0
优化谷歌联盟广告JS加载缓慢问题,提高网站页面的加载速度
前端成神之路-WebAPIs02
自定义属性目的:是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。
海仔
2020/12/22
7820
前端成神之路-WebAPIs02
JavaScript DOM编程艺术 读书笔记
DOM的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容,结构和样式。
lilugirl
2019/05/26
9810
JavaScript 学习-31.HTML DOM 修改 HTML 内容
前言 通过 HTML DOM,JavaScript 能够访问 HTML 文档中的每个元素,并且可以修改这些元素的属性和文本值 修改 HTML = 改变元素、属性、样式和事件 修改 HTML 元素 修改 HTML DOM 意味着许多不同的方面: 改变 HTML 内容 改变 CSS 样式 改变 HTML 属性 创建新的 HTML 元素 删除已有的 HTML 元素 改变事件(处理程序) innerHTML 插入文本 innerHTML 插入文本或者修改元素的文本值 <body> <h1>DOM H
上海-悠悠
2022/05/30
2K0
JavaScript 学习-31.HTML DOM 修改 HTML 内容
自制在线富文本编辑器,精简完整版
 不需要插入图片功能的去掉php代码然后将.php文件改为.html即可变成本地文本编辑器,是不是很酷!当然功能跟world比没那么强大!
超级小可爱
2023/02/17
2K0
自制在线富文本编辑器,精简完整版
Javascript DOM(一)
预解析:js 引擎会把 js 里面所有的 var 和 function 提升到当前作用域的最前面
赤蓝紫
2023/01/01
1.2K0
Javascript DOM(一)
【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 )
在 【Web APIs】JavaScript 操作元素 ① ( 修改元素内容 | innerText 属性修改元素文本内容 | innerHTML 属性修改元素 HTML 内容 ) 博客中介绍了 使用
韩曙亮
2024/08/09
3230
【Web APIs】JavaScript 操作元素 ② ( 修改元素属性 | 直接访问属性 | 使用setAttribute、getAttribute 和 removeAttribute访问属性 )
Element 对象
Element对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点)。
RiemannHypothesis
2022/10/31
1.7K0
Lodop打印样式问题与解决方法 原
1、<h3 class="printTitle">工商客户抄表收费通知单</h3> 标题,在打印预览时最后一个字会变小
tianyawhl
2019/04/04
4.8K1
03_JavaScript学习笔记整理-DOM
DOM :DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器
全栈程序员站长
2021/07/13
7310
Javascript快速入门(上篇)
Javascript的熟练之路,小弟来了。 JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScrip
用户1216676
2018/01/24
1.1K0
Javascript快速入门(上篇)
一篇文章带你了解JavaScript htmldom 元素
通常,使用JavaScript,想操作HTML元素。要做到这一点,必须先找到元素。有几种方法可以做到这一点。
前端进阶者
2021/05/17
2K0
一篇文章带你了解JavaScript htmldom 元素
图片库
点击链接实现当前页面对应图片的跳转, 页面结构代码: <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } a{ text-decoration: none; color: #333; } div{
天天_哥
2018/09/29
5160
JavaScript 剪贴板 Clipboard 的那些事儿!
携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第19天,点击查看活动详情
掘金安东尼
2022/09/22
1.5K0
JavaScript 剪贴板 Clipboard 的那些事儿!
DOM实现JavaScript图片库
创建一个函数名为 showpic , whitchpic 为参数。whitchpic 通过调用 getAttribute ,把 "href" 作为参数传递给 getAttribute ,声明一个变量并把语句赋给它。 接下来获取占位图,需要在 html 部分进行修改。 <img> 元素添加 id ,调用 document.getElementById ,再次声明一个变量并把语句赋给它。最后通过 setAttribute 进行实现。
jcjyxjs
2021/09/09
5110
相关推荐
JavaScript 简介
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档