如何使用 Javascript/Jquery 更改或关闭 css 属性？

Question

我通常能够 select 使用其 ID 的元素并对其进行操作或通过其关联 class，但我无法对当前元素执行此操作，因为它使用的是正在获取的标签优先于我的更改。无论如何要覆盖标签或关闭适用于我的元素的标签的 CSS 的一部分？

下面是我要编辑的 CSS 元素

下面是 HTML 'div' 我正在尝试使用以蓝色突出显示的实际项目进行编辑

Answer 1

你可以用普通的 JS 来做，这肯定有效，但是很麻烦。

let yourLabel = document.getElementById("yourID");
yourLabel.setAttribute ('style', 'font-size: 11px !important;');

这将覆盖“重要！”属性并且是纯香草 JS。

let yourLabel = document.getElementById("yourID");
yourLabel.setAttribute ('style', 'font-size: 11px !important;');

#yourID {
  
  font-size: 166px !important;
  font-weight: 700 !important;
}

<label id="yourID">label</label> not label

运行代码片段，效果很好 now:_)

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

When an important rule is used on a style declaration, this declaration overrides any other declarations.

这在视觉上显示如下：

div {
  color: #ffffff00;
  padding: 30px;
  width: 50%;
  border-radius: 10px;
}

.first {
  background-color: blue !important;
}


/* Even though these styles are declared after .first, 
  .first takes precedence because it uses the !important rule*/

.second {
  background-color: red;
}

<!-- Both classes are applied to this div: -->
<div class="first second"></div>

因此，为了让您的规则具有更高的优先级，您也必须使用 !important 规则。然而：

Using !important, however, is bad practice and should be avoided

所以一定不要使用 !important 除非它是唯一的选择。

以下代码应作为您问题的基础：

let div = document.getElementById("example")
div.style.setProperty("background-color", "green", "important");

div {
  color: #ffffff00;
  padding: 30px;
  width: 50%;
  border-radius: 10px;
}

.first {
  background-color: blue !important;
}


/* Even though these styles are declared after .first, 
      .first takes precedence because it uses the !important rule*/

.second {
  background-color: red;
}

<div id="example" class="first second"></div>

希望对您有所帮助，祝您有个愉快的一天！

如何使用 Javascript/Jquery 更改或关闭 css 属性？

How do I change or turn off a css attribute using Javascript/Jquery?

javascript

css

tags

jquery

overriding