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

Я спробував ввести стиль, використовуючи цей код:

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

На каскаді CSS , застосувавши ! Important Правило я можу перемогти походження і специфіку.

Я спробував ввести це за допомогою Firefox Firebug на www.google.com, але не пощастило.

Як ввести колір переднього плану за допомогою правила ! Important ?

44
Ви спробували пробіл? document.body.style.color = "зелений! важливий";
додано Автор Esailija, джерело

6 Відповіді

За специфікацією, якщо ви хочете встановити пріоритет, а не тільки його значення, ви повинні використовувати setProperty , наприклад:

document.body.style.setProperty ("color", "green", "important");
91
додано
Лише IE9 +. Очевидно, ви можете використовувати setAttribute замість
додано Автор RTF, джерело
@BoltClock, для яких специфікацій?
додано Автор Pacerier, джерело
@RTF: Припускаючи, що реалізація є правильною, вона повинна бути можливою - ! Important може легально відображатися в деклараціях стилю.
додано Автор BoltClock, джерело
@Pacerier: css-style-attr, який просто слідує тій же граматиці, що й у інших CSS.
додано Автор BoltClock, джерело
element.style.cssText = 'color:green !important';

має працювати для вас.

8
додано
Метод (наприклад, ... + = ... ), наданий @guari, працює лише при оновленні пріоритету стилю до "! Important". З іншого боку, зменшення з "! Important" не відбудеться. тобто element.style.cssText + = 'колір: синій' , не вдасться, тоді як element.style.cssText + = 'колір: синій! важливо' буде працювати.
додано Автор codechimp, джерело
якщо на елементі є інші стилі, просто об'єднайте свої стилі: element.style.cssText + = '; колір: зелений! важливо;' і ви безпечні для браузерів, які підтримують cssText властивість! :)
додано Автор guari, джерело
Це працює, якщо на елементі не встановлено інших стилів, інакше вони перезаписують будь-які інші стилі на елементі і втратять їх.
додано Автор robocat, джерело

всі відповіді великі, але всі передбачали значення атрибута фіксований , що якщо

подивіться на моє рішення

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

instead of hand writing the value, I got it using jQuery $(this).css('attr')

2
додано

Використовуйте лише це:

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

Вам не доведеться використовувати важливі таким чином. У всякому разі, як Fatal вказував, це не спрацює, коли є безпосередньо важливе правило в CSS stylesheet, що потрібно перевизначити.

Таким чином, ви повинні динамічно створювати таблицю стилів і розміщувати її в голові:

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;}')
1
додано
Це буде побито стилем CSS з ID-селектором і! Важливим. HTML: <body id = "illwin" style = "color: green;"> Це тест! </body> CSS: #illwin {колір: червоний! важливий; } Це призведе до появи червоного кольору. jsfiddle.net/C6zH2
додано Автор Fabian Barney, джерело

style.cssText - це єдиний спосіб додати важливе значення.

<script>
   document.body.style.cssText='color: red !important;'
</script>
1
додано

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

Як, наприклад, текст сторінки результату пошуку має клас "st". всі результати пошуку інкапсульовані в

  • .

    Таким чином, деякий код для такого ефекту може виглядати так:

    var arr = document.getElementsByClassName('st');
    for(i=0; i
  • 1
    додано
    хенки для відповідей спробували вставити document.body.style.color = "green! important"; на bbc.co.uk використовуючи firefox firebug, але не пощастило :( Подивився на стиль у firebug, це пов'язано з * {color: # 505050;} не бачить "! @Ahren, я подумав, що джерело (важливий користувач) перехитрив усі інші правила, незалежно від того, в чому конкретність була? noreferrer "> w3.org/TR/CSS2/cascade.html (6.4.1 каскадний порядок) & якщо я введений! функціональність ": D
    додано Автор android_baby, джерело
    ІТ КПІ - JavaScript
    ІТ КПІ - JavaScript
    504 учасників

    співтовариство javascript розробників в Telegram