javascript - 用nextSibling处理相邻元素的样式问题
大家讲道理
大家讲道理 2017-04-10 16:54:33
0
3
351

希望能用DOM的nextSibling属性设置<h1>元素相邻的下一个

元素的color样式,但是怎么整都没有效果,路过的大侠帮忙看一下,多谢!

<!DOCTYPE html">
<html>
<head>
     <meta charset=utf-8" />
     <script  src="scripts/smm.js"></script>
</head>
<body>
    <h1>Hold the front page</h1>
    <p>This first paragraph leads you in.</p>
    <p>Now you get the nitty-gritty of the story.</p>
    <h1>Extra! Extra!</h1>
    <p>Further developments are unfolding.</p>
    <p>You can read all about it here.</p>
</body>
</html>

下面是对应的JavaScript代码...............................

  function xx()
    { var e1=document.getElementsByTagName("h1");
      for(var i=0;i<e1.length;i++)
      {e2=nextElement(e1);
       e2.style.color="red";}
    }
    function nextElement(node)
    { if(node.nextSibling.nodeType=1)
        return node.nextSibling;
      else 
        return nextElement(node.nextSibling);
        return null;
    }
    window.onload=xx;

效果如下图:

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(3)
洪涛

1.<meta charset=utf-8" />少写了一个双引号
2.if(node.nextSibling.nodeType=1)这里应该是双等号
3.

{ var e1=document.getElementsByTagName("h1");
    for(var i=0;i<e1.length;i++)
      {e2=nextElement(e1);//这里是循环,所以应该是e1[i]。e1是个对象集合,而不是单个dom节点,你的写法导致了nextElement(node)函数调用失败,因为这个函数的参数是一个dom节点
       e2.style.color="red";}
}
Ty80

怎么写的这么复杂,这个明明就可以用css3选择器;

var h1s = document.getElementsByTagName("h1");
for (var i = 0, len = h1s.length; i < len; i++) {
    var nextNode = h1s[i].nextSibling;
    if (nextNode.nodeType !== 1) {
        nextNode = nextNode.nextSibling;
    }
    nextNode.style.color = "red";
    
};
洪涛

楼主,你的if(node.nextSibling.nodeType=1),应该是==才对,而=是直接复制了,导致永远不会执行else语句

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template