3

这是我的代码

<!doctype html>
<html>
<head>
    <style>
        body {
            color:red;
        }
    </style>
    <script>
        window.onclick = function(){
            document.getElementsByTagName("body").color="blue";
        }
    </script>
</head>
<body>
    here is some text for test
</body>

当我在我的浏览器中运行它（最初它是红色的）并在窗口中单击它不响应单击我的意思是它应该将文本的颜色从红色更改为蓝色但没有任何反应。我哪里错了？

4

6 回答 6

3

尝试这个：-

演示

这将为 body 元素添加样式属性，这将覆盖 css 规则。

window.onclick = function(){
        document.getElementsByTagName("body")[0].style.color="blue";
    }

它应该是style.color元素color属性的一个属性，style即使它body .getElementsByTagName返回一个集合，所以您需要使用它document.getElementsByTagName("body")[0]来获取元素并将样式应用于它。

是的，应用元素直接的样式将覆盖类 css 规则

于 2013-05-20T06:17:39.420 回答
2

Style 属性优先于类应用的样式。

document.getElementsByTagName("body").color="blue";

这个有更多偏好

颜色也是样式属性的属性。

所以你的风格应该看起来像这样，因为它getElementsByTagName返回一个节点列表。

document.getElementsByTagName("body")[0].style.color="blue";

改用类是一个更好的主意，因为它更干净。

于 2013-05-20T06:15:19.617 回答
1

你的 JS 有错误。getElementsByTagName返回一个 NodeList（类似于数组），而不是单个元素。您需要在元素上设置属性，而不是 NodeList。例如：

document.body.color="blue";

设置colorbody 元素的属性（IIRC，自从我接近 HTML 的那部分以来已经很长时间了）相当于设置color属性。这是一个过时的表示提示属性。

CSS规范说：

UA 可以选择尊重 HTML 源文档中的表示属性。如果是这样，这些属性将被转换为特定性等于 0 的相应 CSS 规则，并被视为插入到作者样式表的开头。因此，它们可能会被后续样式表规则覆盖。在过渡阶段，此策略将使样式属性更容易与样式表共存。

所以样式表中指定的样式应该继续适用。

另一方面，设置style.something属性相当于修改元素的style 属性。

document.body.style.color="blue";

在级联中，!important除了声明之外，通过属性设置的style属性是最具体的。

所以在这两个规则中，蓝色的会赢。

于 2013-05-20T06:26:21.480 回答
1

内联 CSS 更强大，并覆盖在其他任何地方定义的 CSS。就您的代码的工作而言，我对其进行了如下修改：

window.onclick = function(){
        //document.getElementsByTagName("body").color="blue";
document.body.style.color="blue";
    }

演示在这里

于 2013-05-20T06:23:01.577 回答
0

js 和 css 不相互竞争，你所做的本质上是 javascript 将 css 应用于 html 元素，这意味着它仍然是 css，这种 css 称为内联 css，。正如其他人所说，内联 css 比普通 css 具有更多优先级，除非您!important在 css 规则中使用

至于为什么你的代码不起作用，因为你做错了。

更改 document.getElementsByTagName("body").color="blue"; 为 document.getElementsByTagName("body")[0].style.color = 'blue';

这是一个 jsFiddle

http://jsfiddle.net/n2kqd/

于 2013-05-20T06:27:12.223 回答
0

JS 内联插入更改，给它们几乎最高的优先级，除非你在你的 css 中有 !important。

检查您的代码 (document.getElementsByTagName("body").color="blue";) 是否可以从开发控制台（Chrome 的 F12）工作。它似乎有问题。但是，我无法帮助调试，因为我通常通过 jQuery 执行此类操作，而香草 JS 颜色更改对我来说是不直观的。

于 2013-05-20T06:17:32.763 回答