本案例主要学习理解,用到的几个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的方式点击切换图片及修改文字相关推荐

  1. android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法

    本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法.分享给大家供大家参考,具体如下: 其实原理很简单,用到的是selector,用来设置android:background和an ...

  2. hover图片显现遮罩 点击切换图片

    hover图片显现遮罩 点击切换图片 代码如下: html: <div class="box"><ul class="imgs">< ...

  3. java点击按钮隐藏图片6_原生JS实现隐藏显示图片 JS实现点击切换图片效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求: 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片 ...

  4. vue制作点击切换图片效果

    思路 创建一个数组,数组里面放入图片,利用props(父组件向子组件传值),v-for(循环),v-bind(绑定属性)将图片传入HTML定义的div中. Ⅰ.在头部导入vue文件(导入前提是vue文 ...

  5. 【影院选座功能模板】vue实现选座功能,点击切换图片,获取座位信息

    前言 最近突然看到这个功能了,就想着研究一下如何写, 然后在网上看了一些帖子,总结了一下, 这里套用了一个别人的数据结构,这个感觉毕竟好用. 然后写一个简单的模板放在这,以后可能会再这个基础上修改或者 ...

  6. 【ANDROID游戏开发十六】ANDROID GESTURE之【触摸屏手势识别】操作!利用触摸屏手势实现一个简单切换图片的功能!...

    本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/android-game/337.html - ...

  7. html鼠标点击切换图片,js鼠标点击图片切换效果代码分享

    本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...

  8. 使用css3和h5实现幻灯片,点击切换图片效果

    css3代码部分 <style>*{padding: 0;margin: 0;}.box{display: block;width: 300px;height: 70px;}ul{disp ...

  9. html原生轮播图的实现,使用原生js实现点击切换图片(轮播图)效果

    要实现的功能大致为: 点击两边的切换按钮,可以按顺序切换不同的图片 具体操作如下: 一.布局html 1.添加一个div容器 2.添加一个轮播图img标签 3.添加两个按钮img标签 二.css样式设 ...

  10. jQuery学习:点击 切换图片向左向右移动类似

    重点部分在于页面到最右边 最左边的判断 --到最左边 左边的点击不能切换 到最右边 右边的点击失效 右边的按钮进行判断 ---进行下一张图片的移动 移动后也需要判断 移动图片 $backward.cl ...

最新文章

  1. 计算机管理 未分配磁盘,win7系统硬盘(未分配磁盘)如何重新建立扩展分区?
  2. Idea中一个服务按多个端口同时启动
  3. 当你装不上Python外部包时,试试这个网站
  4. 如何使用JMX监控Kafka
  5. idc服务器管理系统勇士水花,idc管理系统
  6. BZOJ-1177 [Apio2009]Oil
  7. C语言回调函数 钩子函数,回调函数和钩子函数的说明
  8. [Python+MATLAB] 在Python中使用MATLAB (持续更新中)
  9. pdf批量添加图章_1分钟学会制作电子公章,三步搞定,轻松在PDF文件中添加公章图片...
  10. 松下PLC报mewnet设备打开错误----重启电脑就好!!!
  11. 操作系统中的FCFS(First Come First Served)先来先服务算法,java实现
  12. 最近在做微信支付委托代扣交互图。总结了几点需要注意的地方,与大家分享一下
  13. Golang的反射机制(The Laws of Reflection)
  14. 【论文翻译笔记】Seamlessly Unifying Attributes and Items: Conversational Recommendation for Cold-Start User
  15. 中医针灸学综合练习题库【11】
  16. 《软技能:代码之外的生存指南》读书笔记
  17. PayPay migrated the core payment database from Aurora to TiDB
  18. 《大象:thinking in uml 》(第二版) 11章 系统分析 3-4节 用例实现、软件架构和框架
  19. 计算机微机维修工四级理论知识试卷,计算机维修工中级理论知识试卷2
  20. idc机房建设费用_数据中心机房收费标准

热门文章

  1. arguments的类型是Array吗?
  2. Trip to Canvas(1)
  3. ImageNet夺冠后转战NLP!卡内基梅隆华人博士提出谷歌搜索引擎核心技术
  4. 珍惜平时一点一滴,这几个值得跟进学习的阿里、滴滴、微软超级牛人的公众号!...
  5. 【论文解读】结合概率图模型和神经网络做图片问答
  6. 字节跳动宣布要做全网搜索,百度真正的危机来了
  7. 谈谈这一两年的成长 | 读研一年半,靠学习收入四十多万 !
  8. 20191202_Python支持向量机的实现
  9. python基础3-运算符总结_位操作符_优先级问题
  10. MapReduce+MapReduce执行过程(四)