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