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格式。

Answer 3

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

document.getElementsByTagName('*')

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

Answer 4

感谢 VisioN 提供解决方案！我记得您可以使用新的JavaScript Query Selector 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';
}

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

4 个答案: