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

【问题标题】：How to set the universal CSS selector with JavaScript?如何使用 JavaScript 设置通用 CSS 选择器？
【发布时间】：2021-03-31 01:36:09
【问题描述】：

我经常使用 CSS 通用选择器来重置 HTML 文档中的尺寸：

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

这也可以用 JavaScript 来完成吗？

对于普通的 HTML 元素，有 style 属性。但是如何与通用选择器对话呢？

【问题讨论】：

@OneTrickPony 这需要 jQuery...
为什么要使用 JavaScript？
我需要它来初始化一些 JavaScript 性能测试。

标签： javascript css css-selectors

【解决方案1】：

getElementsByTagName("*") 将返回 DOM 中的所有元素。然后你可以为集合中的每个元素设置样式：

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

【讨论】：

完全相关：stackoverflow.com/questions/15901030/… 谢谢

【解决方案2】：

您不需要迭代所有元素。您可以向浏览器的 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";

当然你不需要在运行时创建<style> 标签。你也可以在纯 HTML 中使用它。

你可以运行这个 sn-p 来测试它：

;(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));

console.log("universal" in window); // true

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

<div>
  Hello
  <span>World</span>
</div>

【讨论】：

Uncaught TypeError: window.universal is undefined 使用 window.universal.style.border = "1px solid red"; 时在 Firefox 86.0.1 中显示
您是否运行了创建window.universal 对象的脚本？我在 Firefox 86 和 88 中运行，它仍在工作（尽管它是一个非常古老的代码，我现在不会做这样的事情）。如果您尝试在没有上述脚本的情况下访问window.universal，它将无法正常工作。
好吧，我在主html文件中的<script>标签中添加了代码，可能在标题标签中（更改了代码，所以不记得了）并且在加载页面后，该错误显示在浏览器控制台中。不明白为什么。
我在原始答案中添加了一个 sn-p，以便您对其进行测试。我不知道您的代码的详细信息，所以我无法调试它。但看起来当您尝试访问 window.universal 时，您还没有执行 sn-p 来创建它。
非常感谢，现在它可以工作了，我可能错过了以前代码的功能解决方法

【解决方案3】：

在原始 javascript 中，您可以这样做：

document.getElementsByTagName('*')

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

【讨论】：

【解决方案4】：

感谢 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';
}

【讨论】：

当然你可以使用querySelectorAll，但是你必须考虑可能的兼容性问题。