javascript - 如何使用 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));

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

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

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

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 = ...
}

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