如何使用JavaScript设置通用CSS选择器？

我经常使用CSS通用选择器重置HTML文档中的维度：

* {
    border: 0;
    margin: 0; 
    padding: 0; 
}

JavaScript也能做到这一点吗

对于普通HTML元素，有

style

属性。 但是如何与通用选择器对话？

getElementsByTagName（“*”）

将从DOM返回所有元素。然后，可以为集合中的每个元素设置样式：

var allElements = document.getElementsByTagName("*");
for (var i = 0, len = allElements.length; i < len; i++) {
    var element = allElements[i];
    // element.style.border = ...
}

var-allegements=document.getElementsByTagName（“*”）；
对于（var i=0，len=allegements.length；i

在原始javascript中，您可以执行以下操作：

document.getElementsByTagName('*')

---

但我不建议使用js将css添加到所有元素。

感谢VisioN提供的解决方案！我刚刚想起，您可以使用新的JavaScript查询选择器API执行同样的操作：

var allElements = document.querySelectorAll('*');

for (var i = 0; i < allElements.length; i++) {
  var element = allElements[i];        
  element.style.border = '0px';
  element.style.margin = '0px';
  element.style.padding = '0px';
}

var-allegements=document.querySelectorAll（'*'）；
对于（var i=0；i

您不需要迭代所有元素。您可以向浏览器的CSS引擎要求此操作。诸如此类：

;(function(exports) {
  var style = document.querySelector("head")
                      .appendChild(document.createElement("style"));

  var styleSheet = document.styleSheets[document.styleSheets.length - 1];
  styleSheet.insertRule("* {}", 0);

  exports.universal = styleSheet.cssRules[0];
}(window));

从现在起，您就有了一个

window.universal

对象，可以用来设置所有元素的样式。例如：

window.universal.style.border = "1px solid red";

当然，您不需要在运行时创建

标记。您也可以在纯HTML中使用它

您可以运行以下代码段对其进行测试：

；（职能（出口）{
var style=document.querySelector（“head”）
.appendChild（document.createElement（“样式”））；
var styleSheet=document.styleSheets[document.styleSheets.length-1]；
insertRule（“*{}”，0）；
exports.universal=styleSheet.cssRules[0]；
}（窗口）；
console.log（窗口中的“通用”）；//真的
window.universal.style.border=“1px实心红色”

你好
世界
@OneTrickPony这需要jQuery…为什么要使用JavaScript？我需要它来初始化一些JavaScript性能测试。当然你可以使用
querySelectorAll
，但是，你必须考虑可能的兼容性问题。完全相关：谢谢<代码> Uncaught TypeError：WiDOW.Engult是未定义的<代码>，在使用Firefox 860.1时使用<代码> Windows .Unvial.Studio。边框=“1px实心红”；
您是否运行了创建
window.universal
对象的脚本？我在Firefox86和88中运行，它仍然在工作（尽管这是一个非常旧的代码，我现在不会做这样的事情）。如果您尝试访问
窗口。没有上面的脚本，universal
将无法工作。好的，我在主html文件的
标记中添加了代码，可能是在标题标记中（更改了代码，所以不记得了），加载页面后，该错误会显示在浏览器控制台中。不明白为什么。我在原始答案中添加了一个片段，以便您可以测试它。我不知道你的代码的细节，所以我无法调试它。但是，当您尝试访问
窗口时，它看起来像是一个通用的
窗口。您还没有执行代码段来创建它。非常感谢，现在它可以工作了，我可能错过了解决之前代码中的功能