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

Question

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

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

这可以用JavaScript完成吗？

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

Answer 1

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

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

Answer 2

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

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