Bir "! Önemli" kural ile bir stil enjekte edemiyorum

Bu kodu kullanarak bir stil enjekte etmeye çalıştım:

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

! Önemli CSS çağlayanı > kural köken ve özgüllüğü koyabilirim.

Firefox Firebug’ı kullanarak www.google.com’a enjekte etmeyi denedim ancak şansınız yok.

Ön plan rengini ! Önemli kuralıyla nasıl enjekte edebilirim?

44
Bir boşlukla denedin mi? document.body.style.color = "yeşil! önemli";
katma yazar Esailija, kaynak

6 cevap

Spesifikasyona göre, sadece değeri değil, önceliği ayarlamak isterseniz, aşağıdaki gibi setProperty 'i kullanmalısınız:

document.body.style.setProperty ("color", "green", "important");
91
katma
Sadece IE9 +. Görünüşe göre
katma yazar RTF, kaynak
@BoltClock, Hangi özellikler için?
katma yazar Pacerier, kaynak
@RTF: Uygulamanın doğru olduğunu varsayarsak mümkün olmalıdır - ! Önemli yasal olarak satır içi stil bildirimlerinde görünebilir.
katma yazar BoltClock, kaynak
@Pacerier: Sadece CSS'nin geri kalanında kullanılan aynı dilbilgisini takip eden css-style-attr.
katma yazar BoltClock, kaynak
@RTF msdn.microsoft.com/ tr-us/library/ie/ms536739% 28v = vs85% 29.as & zwnj; px IE8, setAttribute 'u destekliyor görünmektedir.
katma yazar TylerH, kaynak
element.style.cssText = 'color:green !important';

senin için çalışmalı.

8
katma
@Guari tarafından verilen yöntem (yani ... + = ... ) ancak yalnızca bir stilin önceliğini "! Önemli" ye yükseltmede çalışır. Öte yandan, '' önemli '' den küçültme başarısız olur. element.style.cssText + = 'color: blue' , başarısız olurken element.style.cssText + = 'color: blue! important' çalışır.
katma yazar codechimp, kaynak
Öğede başka stiller varsa, yalnızca stillerinizi birleştirin: element.style.cssText + = '; renk: yeşil! önemli;' ve cssText'i destekleyen tarayıcılarda güvendesiniz özellik! :)
katma yazar guari, kaynak
Bu, eleman üzerinde başka bir stil yoksa, aksi takdirde eleman üzerindeki diğer stillerin üzerine yazılır ve onları kaybeder.
katma yazar robocat, kaynak

tüm cevaplar harika ama hepsi, value özniteliğinin fixed olduğunu varsayıyordu.

çözümüme bak

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

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

2
katma

Sadece şunu kullanın:

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

Bu şekilde önemli kullanmak zorunda değilsiniz. Fatal'in işaret ettiği gibi, CSS stil sayfasındaki doğrudan önemli kural olduğunda, geçersiz kılmanız gerekir.

Bu şekilde, dinamik olarak stil sayfası oluşturmanız ve kafanın içine yapıştırmanız gerekir:

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

Ardından stili tıpkı bunun gibi güncelleyebilirsiniz

addNewStyle('body {color:green !important;}')
1
katma
Bu ID Seçici ve! İle bir CSS tarzı tarafından dövülecek. HTML: <body id = "illwin" style = "color: green;"> Bu bir test! </body> CSS: #illwin {color: kırmızı! önemli; } Bu, kırmızı renkli bir metinle sonuçlanır. jsfiddle.net/C6zH2
katma yazar Fabian Barney, kaynak

style.cssText eklemek için tek yoldur!

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

Koddaki herhangi bir hatadan dolayı (boşluk dışında) çok fazla çalışmayabilir ama daha çok vücut etiketini değiştirmek için yeterli bir eleman, sınıf ya da istenenleri oluşturmak için gereken bir şey olmadığından çok çalışmamayı isterim. Efekt.

Örneğin, bir arama sonucunun sayfa metninde bir "st" sınıfı vardır. tüm arama sonuçları her birinde bir

  • etiket.

    Yani böyle bir etkiye bazı kodlar şöyle görünebilir:

    var arr = document.getElementsByClassName('st');
    for(i=0; i
  • 1
    katma
    yanıtlar için hanks document.body.style.color = "yeşil! önemli" enjekte etmeye çalıştı; firefox firebug kullanarak bbc.co.uk üzerine ama hayır şans :( firebug tarzı bir göz vardı, bu yüzden çünkü * {color: # 505050;} göremiyorum "! önemli" niteleyici ben şaşkın @Ahren, kaynağın (kullanıcı açısından önemli), özgüllük ne olursa olsun diğer tüm kuralları çiğnediğini düşündüm? Ref: w3.org/TR/CSS2/cascade.html (6.4.1 basamaklı sıralama) & enjekte edildiyse önemli, diğer tüm cad kurallarının reddedilmesinin önemli olduğunu belirten bir kullanıcı önemli bir bildirim olurdu" kabul işlevsellik ": D
    katma yazar android_baby, kaynak