码迷,mamicode.com
首页 > 其他好文 > 详细

利用DOM的方式点击切换图片及修改文字

时间:2018-09-03 12:03:10      阅读:287      评论:0      收藏:0      [点我收藏+]

标签:text   nodevalue   dom   get   source   col   分解   des   fun   

本案例主要学习理解,用到的几个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="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();

 

利用DOM的方式点击切换图片及修改文字

标签:text   nodevalue   dom   get   source   col   分解   des   fun   

原文地址:https://www.cnblogs.com/xingfuggz/p/9577422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!