javascript - 覆盖 wordpress !important，同时仍然能够使用 javascript 来使用它

Question

我发现了类似的问题，但似乎没有一个涉及我所拥有的特定用例。

我制作了一个自定义网页，用于我的作品 WordPress 网站。WordPress 将自定义代码包装在容器 div 中，并具有以下 CSS：

max-width: 1200px!important
width: 1200px!important;

问题是：

1. 它的设置很重要，所以为了用 css 覆盖它，我必须让我的设置也很重要并且更具体，因为我从这里的其他帖子中收集到。
2. 我需要能够使用 Javascript 即时更改宽度，有一个事件导致这种情况经常发生。
3. 我的 div 的宽度需要是默认值，它只是随着内容的增长而增长。

标签： javascripthtmlcss

Answer 1

您可以添加另一个类来覆盖第一个类（它级联）并将宽度设置为initial.

运行以下代码段并单击div切换baz类以查看它是否覆盖了foo该类。bar类被忽略，因为它!important被foo.

const el = document.querySelector("div");

el.addEventListener('click', () => el.classList.contains("baz") ? el.classList.remove("baz") : el.classList.add("baz"));

.foo {
  background-color: red !important;
  width: 100px !important;
  height: 100px !important;
}

.bar {
  background-color: green;
}

.baz {
  background-color: yellow !important;
  width: initial !important;
  height: 200px !important;
}

<div class="foo bar baz"></div>