如何设置样式在"*"和JavaScript的伪状态

How to set the styles on "*" and pseudo states with JavaScript?

本文关键字：quot JavaScript 状态 何设置 设置 样式      更新时间：2023-09-26

我想在页面上的所有对象上启用和禁用轮廓，我正在使用以下CSS代码:

*, *:before, *:after {
  outline:1px dotted red;
}

我如何用JavaScript编程，我可以启用或禁用它?

我想我可以为一个特定的标签做这样的事情，但不能为*:

document.getElementsByTagName("body")[0].style = "outline:1px dotted red";

启用outline: 

document.getElementByTagName("*").setStyle("outline:1px dotted red");
document.getElementByTagName("*:before").setStyle("outline:1px dotted red");
document.getElementByTagName("*:after").setStyle("outline:1px dotted red");

禁用outline的伪代码:

document.getElementByTagName("*").setStyle("outline:0px dotted red");
document.getElementByTagName("*:before").setStyle("outline:0px dotted red");
document.getElementByTagName("*:after").setStyle("outline:0px dotted red");

你通常不希望循环遍历页面上的所有对象。如果我们忽略性能问题，实际上还有可能覆盖您想要保留的现有样式的情况。

使用Javascript从Inject CSS样式表绘制为字符串

var node;
function changeAllElementsOutline(outlineWidth) {
  if (!node) {  
    node = document.createElement('style');
    document.body.appendChild(node);
  }
  node.innerHTML = '*, *:before, *:after { outline:' + outlineWidth + 'px dotted red; }'
}
<div onClick="changeAllElementsOutline(1);">Set outline</div>
<p onClick="changeAllElementsOutline(0);">Remove outline</p>

最好的答案是保持样式加载，但使其以主体上有一个类为条件。然后，您可以通过添加/删除类来打开或关闭样式。

CSS: 

body.outline-enabled *, 
body.outline-enabled *:before, 
body.outline-enabled *:after {
    outline: 1px solid red;
}
JavaScript: 

function addOutline() {
    document.getElementsByTagName('body')[0].classList.add('outline-enabled');
}
function removeOutline() {
    document.getElementsByTagName('body')[0].classList.remove('outline-enabled');
}
这样，你就把把样式应用到所有需要它的东西上的艰苦工作委托给了浏览器的CSS引擎。

你可以这样做:

var elements = document.querySelectorAll('*');
for(var i = 0; i < elements.length; i++) {
  elements[i].style.outline = '1px dotted red';
}

document.querySelectorAll返回NodeList的一个实例(它是一个类似数组的实例)，因此您可以遍历它的元素。

NodeList上没有方法来设置其元素的样式

相关文章：