Question

给出CSS属性，例如

color: #fff;

我如何找到应用该属性的所有类名？

例如，

.hello {
    color: #fff;
    background: blue;
}
.world {
    color: pink;
    background: teal;
}
.white,
.classname {
    color: #fff;
}

将返回.hello，.white和.classname，因为它们都具有属性color: #fff。

Answer 1

您可以遍历styleSheets，然后遍历规则。

这里是一个例子。

它还包含一个转换颜色的实用工具，因为在#fff样式表中将是rgb（255，255，255）。.

function realColor (name) {
  const d = document.createElement("div");
  d.style.color = name;
  d.style.display = "none";
  document.body.appendChild(d);
  const ret = window.getComputedStyle(d).color;
  d.remove();
  return ret;
}

const findcolor = realColor("#fff");

console.log("What selectors have a color of #fff?");
for (const s of document.styleSheets) {
  for (const r of s.cssRules) {
    if (r.style && r.style.color) {
      if (r.style.color === findcolor) {
        console.log(r.selectorText);
      }
    }
  }
}

.hello {
    color: #fff;
    background: blue;
}
.world {
    color: pink;
    background: teal;
}
.white,
.classname {
    color: #fff;
}

<span class="hello">hello</span>
<span class="world">world</span>

获取某些CSS属性的所有类名称

1 个答案: