[已解决]dom节点问题

Ъγ:_小ツ雨oο · 发表于 2017-5-15 23:42:41

<!doctype html>
<html lang="en">
<head>
        <meta charset="UTF-8" />
        <title></title>
        <style type="text/css">

        </style>
        <script type="text/javascript">
                window.onload = function()
                {
                        function styleHeaderSibings(){
                                if(!document.getElementsByTagName)
                                {
                                        return false;
                                }
                                var headers = document.getElementsByTagName("h1");
                                var elem;
                                
                                for(var i = 0; i < headers.length; i++)
                                {
                                        elem = getNextElement(headers[i].nextSibling);
                                        
                                        elem.style.fontWeight = "bold";
                                        elem.style.fontSize = "40px";
                                        elem.style.color = "red";
                                }
                        }
                }
                
                function getNextElement(node)
                {
                        if(node.nodeType == 1)
                        {
                                return node;
                        }
                        
                        if(node.nextSibling)
                        {
                                return getNextElement(node.nextSilbing);
                        }
                        return null;
                }
        </script>
</head>
<body>
        <h1>a</h1>
        <h1>b</h1>
        <h1>c</h1>
        <h1>d</h1>
</body>
</html>

设置了字体等没反应F12也没错，求救 ==

最佳答案

月排行榜 / 总排行榜

不二如是

2017-5-15 23:42:42

本帖最后由不二如是于 2017-5-17 22:35 编辑

先抛开，DOM树遍历方法正确与否不说。。。

居然要对<h1>这中内置好样式的标签修改大小，就很尴尬了！

建议换成<p>标签，然后放在一个div里

在利用便利一个，id为xxx的div下所有子节点的办法，修改<p>样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">

    </style>
    <script type="text/javascript">
        var adiv=document.querySelectorAll("#d1 p");
for(i=0;i<adiv.length;i++){
    adiv[i].style.color="red";
    adiv[i].style.fontSize="55px";
}
    </script>
</head>
<body>
<div id="try">
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>e</p>
</div>

</body>
</html>

跳转到最佳答案楼层

不二如是 · 发表于 2017-5-15 23:42:42

本帖最后由不二如是于 2017-5-17 22:35 编辑

先抛开，DOM树遍历方法正确与否不说。。。

居然要对<h1>这中内置好样式的标签修改大小，就很尴尬了！

建议换成<p>标签，然后放在一个div里

在利用便利一个，id为xxx的div下所有子节点的办法，修改<p>样式

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">

    </style>
    <script type="text/javascript">
        var adiv=document.querySelectorAll("#d1 p");
for(i=0;i<adiv.length;i++){
    adiv[i].style.color="red";
    adiv[i].style.fontSize="55px";
}
    </script>
</head>
<body>
<div id="try">
<p>a</p>
<p>b</p>
<p>c</p>
<p>d</p>
<p>e</p>
</div>

</body>
</html>

alltolove · 发表于 2017-5-16 14:28:39

火狐不支持getElementsByTagName这个语句所以也没法调试

账号		自动登录	找回密码
密码			立即注册