getAttribute 无法设置属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>execise</title>
    <style type="text/css">
     #title{
     color: orange;
     }
    </style>
</head>
<body>
<div id="header">
<p id="title">元素</p>
</div>

<script>
    var str4=document.getElementsByTagName("p");
    console.log(str4[0]);    //第一，在控制台输出时，有getAttribute获得的属性，为何在文档内容中没有显示
    //输出为<p id="title" color="red">元素</p>
    var name=str4[0].getAttribute("color");
    console.log(name);
    //第二，为何输出为 null，在样式中不是给他设置了 color:orange 吗？
    str4[0].setAttribute("color","red");
</script>
</body>
</html>

第一，在控制台输出时，有getAttribute获得的属性，为何在文档内容中没有显示

第二，为何输出为 null，在样式中不是给他设置了 color:orange 吗？

秋渡 2017-08-02

源自：JavaScript DOM基础 1-22 DOM属性设置与获取

收起

3回答

小丸子爱吃菜回答被采纳获得+3积分 2017-08-02 11:16:24

1、你获取name时，浏览器还没有解析到str4[0].setAttribute("color","red");这条语句，把它放在 console.log(name);前面就可以获取到了！

2、color="red"只是一个属性值为red的属性，并不是样式，如果是样式，如果是行内的话就应该是：

<p id="title" style="color:red">元素</p>

祝学习愉快！

收起回答

秋渡提问者 #1

非常感谢！

2017-08-02 18:26:16
秋渡提问者 #2

获取name时，浏览器还没有解析到str4[0].setAttribute("color","red"); 所以没有获取到那为什么console.log(str4[0]); 同样没有解析到，输出的结果是已经获取到了呢，输出为元素

2017-08-02 18:30:29

好帮手慕糖 2017-08-03 11:47:31

你好，这个跟浏览器的解析机制有关，str4[0].setAttribute("cor","red");的添加改变的原有的html结构，使得最后的html结构为：元素；正常情况下console.log(str4[0]); 输出的时候是没有color="red"这个属性的，但是这个的str4[0]输出了最后的结构，你可以换火狐、ie浏览器测试下，就可以发现结果是正常的（最好第一次进入之后，刷新下查看）。祝学习愉快！

收起回答