querySelectorAll 选择基于 css

Question

这是我遇到的问题的简单表示。当您单击该按钮时，所有黑色 div 都应变为黑色。但是带有 css 样式的大字体则不然。有任何想法吗？非常感谢。

var v;

function link() {
  v = document.querySelectorAll('[style*="background:black;"]');
  v.forEach(function(value) {
    value.style.backgroundColor = "red";
  });
}

.box1 {
  background-color: black;
  height: 200px;
  width: 200px;
  border: 2px solid green;
  font-size: 25px;
  color: white;
}

<html>

<head>
  <link rel="stylesheet" href="filter.css" />
</head>

<body>

  <div style="background:black; height:100px; width:100px;" id="div1"></div>
  <div style="background:blue; height:100px; width:100px;"></div>
  <div style="background:black; height:100px; width:100px;"></div>
  <div class="box1"> css styled box</div>
  <button onclick="link()" style="height:20px; width:50px;">Click </button>

</body>

</html>

Answer 1

试试这个

var v;
function link(){
 v=document.querySelectorAll('[style*="background:black;"]');
 v.forEach(function(value){
  value.style.backgroundColor = "red";
 });
}

.box1{
 height:200px;
 width:200px;
 border:2px solid green;
    font-size:25px;
    color:white;
}

<html>
<head>
<link rel="stylesheet" href="filter.css" />
</head>
<body>

<div style="background:black; height:100px; width:100px;" id="div1"></div>
<div style="background:blue; height:100px; width:100px;"></div>
<div style="background:black; height:100px; width:100px;"></div>
<div class="box1" style="background:black;"> css styled box</div>
<button onclick="link()" style="height:20px; width:50px;">Click </button>

</body>
</html>

querySelectorAll 选择基于 css

querySelectorAll selection based on css

html

javascript

css

selector