利用DOM的方式点击切换图片及修改文字
本案例主要学习理解,用到的几个DOM方法
01、getAttribute()方法,获取元素的属性值
02、setAttribute('src',source) 方法,用后边的值修改前边这个元素的属性值
html基本框架代码
1 <h1>图片点击切换</h1> 2 <ul id="imagegallery"> 3 <li><a href="images/654.jpg" title="图片一说明">图片一</a></li> 4 <li><a href="images/contentimg.jpg" title="图片二说明">图片二</a></li> 5 <li><a href="images/tuku.jpg" title="图片三说明">图片三</a></li> 6 </ul> 7 <img src="data:images/toutiao3.jpg" alt="占位图" id="img"> 8 <p id="description">图片说明</p>
js相关代码
实现的思路分解:
01、用getAttribute()方法获取到a标签的href的属性值
02、用document.getElementById()方法获取到图片
03、用setAttribute('要修改的元素属性',用href的值修改)
点击修改图片基本思路就是这样。
修改文字的思路,这里为了练习dom的相关方法,没有使用innerHTML方法
01、用getAttribute()方法获取到a标签的title的属性值
02、获取要修改的id
03、获取p元素的第一个文本节点的值 用到firstChild.nodeValu获取
04、我们把获取到的title的属性值赋值给03步骤的变量
1 function showpic(winpic){ 2 if(!document.getElementById('img')) return false; 3 var source = winpic.getAttribute('href'); 4 var oImg = document.getElementById('img'); 5 if(oImg.nodeName !='IMG') return false; 6 oImg.setAttribute('src',source); 7 if(document.getElementById('description')){ 8 var description = document.getElementById('description'); 9 var text = winpic.getAttribute('title'); 10 description.firstChild.nodeValue = text; 11 //description.innerHTML = text; 12 } 13 return true; 14 } 15 16 function prepareGallery(){ 17 if(!document.getElementsByTagName) return false; 18 if(!document.getElementById) return false; 19 if(!document.getElementById('imagegallery')) return false; 20 var gallery = document.getElementById('imagegallery'); 21 var links = gallery.getElementsByTagName('a'); 22 for(var i=0;i<links.length;i++){ 23 links[i].onclick = function(){ 24 //return showpic(this) ? return : false; 25 showpic(this); 26 return false; 27 } 28 } 29 } 30 31 prepareGallery();
转载于:https://www.cnblogs.com/xingfuggz/p/9577422.html
利用DOM的方式点击切换图片及修改文字相关推荐
- android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法
本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法.分享给大家供大家参考,具体如下: 其实原理很简单,用到的是selector,用来设置android:background和an ...
- hover图片显现遮罩 点击切换图片
hover图片显现遮罩 点击切换图片 代码如下: html: <div class="box"><ul class="imgs">< ...
- java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...
- vue制作点击切换图片效果
思路 创建一个数组,数组里面放入图片,利用props(父组件向子组件传值),v-for(循环),v-bind(绑定属性)将图片传入HTML定义的div中. Ⅰ.在头部导入vue文件(导入前提是vue文 ...
- 【影院选座功能模板】vue实现选座功能,点击切换图片,获取座位信息
前言 最近突然看到这个功能了,就想着研究一下如何写, 然后在网上看了一些帖子,总结了一下, 这里套用了一个别人的数据结构,这个感觉毕竟好用. 然后写一个简单的模板放在这,以后可能会再这个基础上修改或者 ...
- 【ANDROID游戏开发十六】ANDROID GESTURE之【触摸屏手势识别】操作!利用触摸屏手势实现一个简单切换图片的功能!...
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/android-game/337.html - ...
- html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
- 使用css3和h5实现幻灯片,点击切换图片效果
css3代码部分 <style>*{padding: 0;margin: 0;}.box{display: block;width: 300px;height: 70px;}ul{disp ...
- html原生轮播图的实现,使用原生js实现点击切换图片(轮播图)效果
要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片 具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签 二.css样式设 ...
- jQuery学习:点击 切换图片向左向右移动类似
重点部分在于页面到最右边 最左边的判断 --到最左边 左边的点击不能切换 到最右边 右边的点击失效 右边的按钮进行判断 ---进行下一张图片的移动 移动后也需要判断 移动图片 $backward.cl ...
最新文章
- 计算机管理 未分配磁盘,win7系统硬盘(未分配磁盘)如何重新建立扩展分区?
- Idea中一个服务按多个端口同时启动
- 当你装不上Python外部包时,试试这个网站
- 如何使用JMX监控Kafka
- idc服务器管理系统勇士水花,idc管理系统
- BZOJ-1177 [Apio2009]Oil
- C语言回调函数 钩子函数,回调函数和钩子函数的说明
- [Python+MATLAB] 在Python中使用MATLAB (持续更新中)
- pdf批量添加图章_1分钟学会制作电子公章,三步搞定,轻松在PDF文件中添加公章图片...
- 松下PLC报mewnet设备打开错误----重启电脑就好!!!
- 操作系统中的FCFS(First Come First Served)先来先服务算法,java实现
- 最近在做微信支付委托代扣交互图。总结了几点需要注意的地方,与大家分享一下
- Golang的反射机制(The Laws of Reflection)
- 【论文翻译笔记】Seamlessly Unifying Attributes and Items: Conversational Recommendation for Cold-Start User
- 中医针灸学综合练习题库【11】
- 《软技能:代码之外的生存指南》读书笔记
- PayPay migrated the core payment database from Aurora to TiDB
- 《大象:thinking in uml 》(第二版) 11章 系统分析 3-4节 用例实现、软件架构和框架
- 计算机微机维修工四级理论知识试卷,计算机维修工中级理论知识试卷2
- idc机房建设费用_数据中心机房收费标准
热门文章
- arguments的类型是Array吗?
- Trip to Canvas(1)
- ImageNet夺冠后转战NLP!卡内基梅隆华人博士提出谷歌搜索引擎核心技术
- 珍惜平时一点一滴,这几个值得跟进学习的阿里、滴滴、微软超级牛人的公众号!...
- 【论文解读】结合概率图模型和神经网络做图片问答
- 字节跳动宣布要做全网搜索,百度真正的危机来了
- 谈谈这一两年的成长 | 读研一年半,靠学习收入四十多万 !
- 20191202_Python支持向量机的实现
- python基础3-运算符总结_位操作符_优先级问题
- MapReduce+MapReduce执行过程(四)