相当于CSS *（所有内容）选择器的JavaScript

Question

JavaScript是否有与CSS *选择器等效的功能？ 如何在JS中实现与以下CSS代码段相同的效果？

* {
    background-color:"#000000";
}

Answer 1

如果使用的是纯JavaScript，则可以使用querySelectorAll()方法：

document.querySelectorAll("*");

这将返回一个包含所有选定元素的NodeList 。 要像CSS一样设置样式：

var nodes = document.querySelectorAll("*");
for(var i=0; i < nodes.length; i++) {
    nodes[i].style.backgroundColor = "#000";
}

您当然可以使用任何其他样式。 为了技术上正确，您必须将querySelectorAll()包装在Array.prototype.slice.call()以将其转换为完整的数组而不是NodeList ，但是为此，这是不必要的。

但是， querySelectorAll()方法是相对较新的，因此为了确保全面支持，您可能需要使用以下方法：

var nodes = document.getElementsByTagName("*");  // gets all elements
for(var i=0; i < nodes.length; i++) {
    nodes[i].style.backgroundColor = "#000";
}

这样做完全相同，但方法不同。 querySelectorAll() 技术上讲应该使用querySelectorAll()因为这是它的目的，但两者都可行。

注意：如果您使用的是jQuery，则更加简单：

$("*").css("background","#000000");

最后，如果是选择的一切，当你只想CSS控制，你可以使用如描述的CSS设置在这里由大卫沃尔什。 此脚本中有一个示例实现。

Answer 2

尝试这个：

var allNodes = document.getElementsByTagName('*');
var node;
for(var i=0;i<allNodes.length;i++){
  node = allNodes.get(i);
  node.style.backgroundColor = '#000000';
}

请注意，尽管这可以工作...我不确定这是您真正想要的。 （例如，这将尝试为可能不接受它的元素设置样式（例如，像<style>或<script>标签一样）

Answer 3

@scunlinf的答案是部分答案，但是您的问题很奇怪：为什么要用JS做CSS？ 您实际上仍然想要CSS：

var all = Array.prototype.slice.call(document.querySelectorAll("*"));
all.forEach(function(e) {
  e.classList.add("blackly");
});

和一个CSS类：

.blackly { background: black!important; }

因为您不希望在JS中使用硬编码的CSS值，所以希望保持这些值可正确控制，可切换等，等等，因此您使用CSS类进行样式设置，最多只能在JavaScript方面切换类。

（如果Array.prototype...部分是新手，则document.querySelectorAll返回一个NodeList，它类似于一个数组，但也非常不一样。通过slice函数运行它，它将生成一个包含所有数组的正确数组像.every ， .forEach等功能）

Answer 4

您可以简单地在HTML中插入<style>标记。

var css = '* { background: red; }',
styletag = document.createElement('style');

styletag.type = 'text/css';
if (styletag.styleSheet){
  styletag.styleSheet.cssText = css;
} else {
  styletag.appendChild(document.createTextNode(css));
}

document.body.appendChild(styletag);

JS小提琴演示