Question

使用vanilla js或jquery，我想知道定义了一些样式属性的所有已定义（可用）类（以及值是什么）。

例如，我想知道定义了border样式的每个类，以及它定义的内容。能够修改那个类也很棒（即更改边框或删除它），但是如果推送，我可以查询使用该类的每个元素，我可以将它切换到我选择的类代替。

我试图编写一个扩展来修改流行网站上的样式。对我来说不幸的是，所有的班级名字都没有意义，而且名字经常变化（他们都被命名为＃34;班级[1..n]＆＃34;）所以我不能使用班级名称作为获取某些元素的准智能方式，关闭旧类并添加我的新自定义元素。该网站也大量使用内联样式，并且我已经能够从中获得大部分内容。但是，有一个类（同样，它的名称从＆＃34; class12＆＃34;更改为＆＃34; class26＆＃34;等），它定义了一个边框。我希望边界死亡。现在我必须知道边框内的内容并上升几个级别以删除带边框类的div。非常烦人。

Answer 1

查看getComputedStyle

const elem = document.querySelector('.test');
const style = getComputedStyle(elem);

// READ
console.log(style.border);

// WRITE
elem.style.border = '1px dotted green';

.test {
  border: 5px solid red;
}

<div class="test">TEST</div>

找到具有某些样式的css类

1 个答案: