JavaScript和CSS哪一个更受青睐

which one is given more preference for JavaScript or CSS?

本文关键字：哪一个 CSS JavaScript      更新时间：2023-09-26

这是我的代码

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

当我在浏览器中运行它时(最初它是红色的)，然后单击窗口，它没有响应单击，我的意思是它应该将文本的颜色从红色更改为蓝色，但什么也没有发生。我哪里错了?

试试这个:-

演示

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

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

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

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

Style属性对类应用的样式有更高的优先级 

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

这有更多的偏好

color也是style属性的一个属性。

所以你的样式应该看起来像这样的getElementsByTagName返回一个节点列表。

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

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

内联CSS更强大，并覆盖在其他地方定义的CSS 。至于你的代码的工作，我稍微修改了一下，像这样:

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

演示

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

document.body.color="blue";

设置body元素的color属性(IIRC，我已经很长时间没有接近HTML的那一部分了)相当于设置color属性。这是一个过时的表示性提示属性。

CSS规范规定:

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

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

另一方面，设置style.something属性相当于修改元素的style 属性。
document.body.style.color="blue";

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

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

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

检查是否你的代码(document.getElementsByTagName("body").color="blue";)工作从开发控制台(F12 for Chrome)。它似乎有问题。我不能帮助调试，然而，因为我通常通过jQuery做这样的动作，和香草的JS颜色变化对我来说是不直观的。

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/

相关文章：