0

Необходимо присвоить некоторые обязательные стили только что созданному при помощи 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>

Прошу объяснений.

2 ответа 2

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

setProperty

Несколько свойств сразу:

elem.setAttribute("style", "color:red!important;font-size:20px!important");
1
  • Спасибо! Не знал о существовании такого API. Однако конкретно в моем случае не подойдет, поскольку мне нужно сразу несколько свойств устанавливать. Но все равно буду иметь в виду. 26 мар 2018 в 13:28
1

Дело в том, что если вы делаете так

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

То цвет записывается в inner style элемента.
Запускаем, жмём F12 и смотрим что получилось.

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

А inner style всегда имеет наивысший приоритет, и никаким классовым переопределениям не подвержен. Кроме как если у класса установлен important.

.class1 {
  color: red;
}

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

6
  • Ааа! Точно! Совсем из головы вылетело. Тогда, выходит, и !important не нужен совершенно... 26 мар 2018 в 13:24
  • А что насчет этого: Однако я не понимаю, почему после такой установки возможно переопределить значение свойства? 26 мар 2018 в 13:30
  • @smellyshovel переопределение возможно либо через класс с important, в этом случае используйте ответ Кирилла. Либо через JS, в этом случае inner style перезапишется. 26 мар 2018 в 13:31
  • в этом случае inner style перезапишется - ну это я вижу. Спрашивал, почему. Ладно, в любом случае спасибо. 26 мар 2018 в 13:32
  • @smellyshovel Я не понял ваш вопрос, что почему, поясните пожалуйста? 26 мар 2018 в 13:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.