主页 / 问题 / 804893
Accepted
smellyshovel
Asked:2020-03-26 21:15:30 +0800 CST2020-03-26 21:15:30 +0800 CST

在使用 cssText 属性设置元素样式时使用 !important 指令

  • 772

您需要对刚刚使用 JavaScript 创建的元素应用一些强制样式elem。由于这些属性是绝对强制性的，绝不应该允许它们被覆盖，因此决定使用!important.

elem.style.color = "red !important";

但是，这是行不通的。上网一翻，发现!important只能通过属性cssText（嗯，或者通过setAtribute）来设置属性。

elem.style.cssText = "color: red !important;";

是的，它似乎真的有效。但是，我不明白为什么在这样的设置之后可以覆盖属性的值：

elem.style.color = "green"; // работает! Текст действительно становится зеленым. Хотя, по идее, не должен.

此外，我不清楚为什么即使该!important属性不能在.css文件中被覆盖。

let elem = document.querySelector("#test");

elem.style.color = "red";
#test {
    color: green;
}
<div id="test">Hello</div>

我要求解释。

javascript

2 个回答

  1. elem.style.setProperty("color", "red", "important");

    设置属性

    同时拥有多个属性：

    elem.setAttribute("style", "color:red!important;font-size:20px!important");
    • 3
  2. Best Answer

    问题是，如果你这样做

    elem = document.getElementById("id1");
elem.style.color = "green";
    <div id="id1">hallow</div>

    然后将颜色写入inner style元素。
    我们跑，我们按F12，我们看结果是这样。

    <div id="id1" style="color: green;">hallow</div>

    Ainner style始终具有最高优先级，并且不受任何类覆盖的影响。除非班级有important.

    .class1 {
  color: red;
}

.class2 {
  color: red !important;
}
    <div class="class1" style="color:green">Привет</div>
<div class="class2" style="color:green">Привет</div>

    • 1

相关问题