Я не могу ввести стиль с "! Важным" правилом

Question

Я пытался внедрить стиль, используя этот код:

document.body.style.color='green!important';

За каскад CSS ref , применяя правило !important, которое я могу превзойти в происхождении и специфичности.*

Я пытался внедрить это с помощью Firefox Firebug в www.google.com, но безуспешно.

Как добавить цвет переднего плана с правилом !important?

Answer 1

Согласно спецификации, если вы хотите установить приоритет, а не только значение, вы должны использовать setProperty, например, так:

document.body.style.setProperty ("color", "green", "important");

Answer 2

element.style.cssText = 'color:green !important';

должно работать на вас.

Answer 3

все ответы великолепны, но все они предположили, что value атрибута равно fixed, что если не

взгляните на мое решение

this.style.setProperty("color", $(this).css('color'), "important");

вместо hand writing значения, я получил его с помощью jquery $(this).css('attr')

Answer 4

style.cssText - единственный способ добавить! Важное.

<script>
   document.body.style.cssText='color: red !important;'
</script>

Answer 5

Я хотел бы заявить, что он может работать не столько из-за какой-либо ошибки в коде (за исключением пробела), сколько из-за того, что изменение тега body не является достаточно конкретным элементом, классом или чем-то, что вам нужно создать желаемый эффект.

Как, например, текст страницы результатов поиска имеет класс "st". все результаты поиска каждый заключены в <li> тег.

Так что некоторый код с таким эффектом может выглядеть так:

var arr = document.getElementsByClassName('st');
for(i=0; i<arr.length; i++){
    arr[i].style.color="green";
}

Answer 6

Используйте только это:

document.body.style.color="green";

вы не можете использовать важные таким образом. В любом случае, как указал Фатал, это не будет работать, если в таблице стилей CSS есть непосредственно важное правило, которое нужно переопределить.

Таким образом, вы должны динамически создать таблицу стилей и разместить ее внутри головы:

function addNewStyle(newStyle) {
   var styleElement = document.getElementById('styles_js');
   if (!styleElement) {
       styleElement = document.createElement('style');
       styleElement.type = 'text/css';
       styleElement.id = 'styles_js';
       document.getElementsByTagName('head')[0].appendChild(styleElement);
   }
   styleElement.appendChild(document.createTextNode(newStyle));
}

Тогда вы можете обновить стиль так же, как это

addNewStyle('body {color:green !important;}')