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

Question

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

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

这也可以用 JavaScript 来完成吗？

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

Answer 1

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

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

Answer 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 中使用它。

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

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

Answer 3

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

document.getElementsByTagName('*')

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

Answer 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';
}