一，使用nextSibling可以方便的找到該節點的兄弟節點，並為其設置屬性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .center{ margin: 0px auto; width: 300px; } .center *{ display: block; padding: 3px 0px; } /*//設置過度*/ .sf{ transition:all 0.5s; } </style> <script language="JavaScript"> /* 封裝方法通過id尋找節點*/ function $(oId){ return document.getElementById(oId); } /*為節點添加屬性*/ function addClass(obj, cn){ var cNames=obj.className; if(cNames.length==0){ obj.className = cn; }else{ obj.className +=(" "+cn); } } /*刪除節點中的屬性*/ function removeClass(obj,cn){ var cs=obj.className; cs=cs.split(""); for(var i=0;i<cs.length;i++){ if(cs[i]==cn){ cs.splice(i,1) } } } /*通過節點尋找該節點的兄弟節點*/ function nextSibling(obj,name){ var ele=obj.nextSibling; //alert(typeof ele); for (;ele!=null; ele = ele.nextSibling) { /*將獲得的值變成大寫*/ var nName = ele.nodeName.toLocaleLowerCase(); /* 判斷是否是想要的節點*/ if (nName == name) { return ele; } } } function repeatElement(ele){ var obj=nextSibling(ele,"img"); while(obj!=null){ /*alert(typeof obj); alert(obj.nodeName); alert(obj.src);*/ addClass(obj,"sf"); /*鼠標指到事件*/ obj.onmouseover=function(){ this.style.padding="10px 0px"; } /*鼠標移開事件*/ obj.onmouseout=function(){ this.style.padding="3px 0px" } obj=nextSibling(obj,"img"); } } window.onload = function(){ //$("bu").onclick = function(){ repeatElement($("start")) } </script> </head> <body> <div class="center"> <div id="start"></div> <!--<button id="bu">向下</button-->> <img src="n1.jpg" /> <img src="n2.jpg" /> <span>ada</span> <img src="n3.jpg" /> <img src="n4.jpg" /> <img src="n5.jpg" /> <!--<button id="top">向上</button>--> </div> </body> </html>
例：