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()应该技术上，因为这是它的目的，但要么有效。

N.B。：如果你正在使用jQuery，那就更容易了：

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

最后，如果只是在选择所有内容时只需要CSS控件，则可以使用David Walsh所描述的here中的CSS设置。在this script中有一个示例实现。

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

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

4 个答案:

JS Fiddle Demo