Ik kan een stijl niet injecteren met een "! Belangrijk" -regel

Ik heb geprobeerd een stijl te injecteren met behulp van deze code:

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

Per de CSS cascade ref , door de ! Important regel Ik kan oorsprong en specificiteit overtreffen.

Ik heb geprobeerd dit te injecteren met Firefox Firebug op www.google.com, maar geen geluk.

Hoe injecteer ik een voorgrondkleur met een ! Important -regel?

 44
toegevoegd bewerkt
Bekeken: 13
de bron
ro ru fr es pt de zh hi bn ar kk uz be tr uk
Heb je geprobeerd met een spatie? document.body.style.color = "groen! belangrijk";
toegevoegd de auteur Esailija, de bron

6 antwoord

Per specificatie, als u de prioriteit wilt instellen, niet alleen de waarde, moet u setProperty gebruiken, zoals:

document.body.style.setProperty ("color", "green", "important");
91
toegevoegd
de bron
Alleen IE9 +. Blijkbaar kunt u in plaats daarvan setAttribute gebruiken voor
toegevoegd de auteur RTF, de bron
@BoltClock, Voor welke specificaties?
toegevoegd de auteur Pacerier, de bron
@RTF: Ervan uitgaande dat de implementatie correct is, moet het mogelijk zijn - ! Important kan legaal worden weergegeven in inline-stijlverklaringen.
toegevoegd de auteur BoltClock, de bron
@Pacerier: css-style-attr, dat eenvoudig dezelfde grammatica volgt die wordt gebruikt in de rest van CSS.
toegevoegd de auteur BoltClock, de bron
@RTF msdn.microsoft.com/ en-us/library/ie/ms536739% 28v = vs.85% 29.as & zwnj; px IE8 lijkt ondersteuning te bieden voor setAttribute
toegevoegd de auteur TylerH, de bron 
element.style.cssText = 'color:green !important';

zou voor u moeten werken.

8
toegevoegd
de bron
Methode (d.w.z. ... + = ... ) gegeven door @guari werkt, maar alleen in het upgraden van de prioriteit van een stijl naar "! Belangrijk". Het downgraden van '! Important' aan de andere kant zal mislukken. d.w.z. element.style.cssText + = 'color: blue' , zal mislukken, terwijl element.style.cssText + = 'color: blue! important' werkt.
toegevoegd de auteur codechimp, de bron
als er andere stijlen in het element zijn, combineer je stijlen dan: element.style.cssText + = '; color: green! important;' en je bent veilig in browsers die cssText ondersteunen eigendom! :)
toegevoegd de auteur guari, de bron
Dat werkt als er geen andere stijlen op het element zijn ingesteld, anders overschrijft het alle andere stijlen op het element en verliest het deze.
toegevoegd de auteur robocat, de bron

alle antwoorden zijn geweldig, maar ze gaan ervan uit dat de waarde van het attribuut fixed is, wat als niet

kijk naar mijn oplossing

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

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

2
toegevoegd
de bron

Gebruik alleen dit:

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

je hoeft op deze manier niet belangrijk te gebruiken. Hoe dan ook, zoals Fatal al zei, dit zal niet werken, als er een direct belangrijke regel is in CSS stylesheet, die je moet overschrijven.

Op deze manier moet u dynamisch stylesheets maken en deze binnen in het hoofd toevoegen:

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));
}

Dan kun je de stijl zomaar updaten

addNewStyle('body {color:green !important;}')
1
toegevoegd
de bron
Dit wordt verslagen door een CSS-stijl met ID-Selector en! Belangrijk. HTML: <body id = "illwin" style = "color: green;"> Dit is een test! </body> CSS: #illwin {color: red! important; } Dit resulteert in rood gekleurde tekst. jsfiddle.net/C6zH2
toegevoegd de auteur Fabian Barney, de bron

style.cssText is de enige manier om toe te voegen! belangrijk.

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

Ik zou willen stellen dat het misschien niet werkt, niet zozeer vanwege een fout in de code (met uitzondering van de spatie) maar meer omdat het aanpassen van de body-tag geen specifiek genoeg element, klasse of wat is om de gewenste te maken effect.

Zoals bijvoorbeeld de paginatekst van een zoekresultaat heeft een klasse van "st". alle zoekresultaten worden elk ingekapseld in een

  • label.

    Dus sommige code voor een dergelijk effect kan er als volgt uitzien:

    var arr = document.getElementsByClassName('st');
for(i=0; i
    • 1
    toegevoegd
    de bron
    hanks voor de antwoorden probeerden document.body.style.color = "green! important" te injecteren; op bbc.co.uk met firefox firebug maar geen geluk :( had een kijkje genomen naar de stijl in firebug, het is te wijten aan * {color: # 505050;} kan de "! important" qualifier niet zien in de bron, dus ik ben verbijsterd @Ahren, ik dacht dat bron (gebruiker belangrijk) alle andere regels verzwakte, ongeacht de specificiteit? Ref: w3.org/TR/CSS2/cascade.html (6.4.1 trapsgewijze bestelling) en als ik belangrijk injecteerde, zou het een belangrijke verklaring van de gebruiker zijn die alle andere cadregels overschrijdt die niet wisten" accepteer functionaliteit ": D
    toegevoegd de auteur android_baby, de bron