Question

这是我的代码

<!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>

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

Answer 1

试试这个： -

Demo

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

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

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

并且应用了样式，direclty元素将覆盖类css规则

Answer 2

样式属性比类应用的样式具有更多优先级。

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

这有更多偏好

color也是style属性的属性。

因此，getElementsByTagName返回节点列表时，您的样式应该看起来像这样。

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

最好使用类，因为它更清洁。

Answer 3

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

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

<强> DEMO here

Answer 4

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

document.body.color="blue";

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

CSS specification says：

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

因此样式表中指定的样式应继续适用。

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

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

在级联中，除!important声明外，properties set via the style attribute最具体。

因此，在这两条规则中，蓝色规则将获胜。

Answer 5

JS将内联更改插入，给予它们几乎最高优先级，除非你的css中有重要内容。

检查您是否编码（document.getElementsByTagName（“body”）。color =“blue”;）从开发控制台（Chrome的F12）开始工作。它似乎有问题。然而，我无法帮助调试，因为我通常通过jQuery执行此类操作，并且vanilla JS颜色更改对我来说不直观。

Answer 6

js和css不会相互竞争，你所做的基本上是javascript将css应用于html元素，这意味着它仍然是css，这种类型的css被称为内联css ,.正如其他人所说的那样内联css比普通css有更多的优先权，除非你在css规则中使用!important

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

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

这是一个jsFiddle

http://jsfiddle.net/n2kqd/

哪一个更喜欢JavaScript或CSS？

6 个答案:

Demo