简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 用nextSibling处理相邻元素的样式问题
大家讲道理
大家讲道理 2017-04-10 16:54:33
0
3
326

希望能用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;

效果如下图：

大家讲道理
大家讲道理

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

全部回覆(3)
洪涛
洪涛2017-04-10 16:56:33 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";}
}
點贊 +0
新增回覆
Ty80
Ty802017-04-10 16:56:33 2樓

怎么写的这么复杂，这个明明就可以用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";
    
};
點贊 +0
新增回覆
洪涛
洪涛2017-04-10 16:56:33 1樓

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

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！