CSSStyleSheet.insertRule() nasıl düzgün şekilde kullanılır?

Burada nereye yanlış gittiğimi anlayamıyorum: /. Bu kodu çalıştırdığımda aldığım tek şey boş bir unsur. Ben bir şey yapmak için insertRule yöntemini elde edemiyorum (bir hata bile üretmeyecek). Bir şey mi eksik?CSSStyleSheet.insertRule() nasıl düzgün şekilde kullanılır?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
</head> 
<body> 
<script> 
    var sheet = (function() { 
     // Create the <style> tag 
     var style = document.createElement("style"); 

     // WebKit hack 
     style.appendChild(document.createTextNode("")); 

     // Add the <style> element to the page 
     document.head.appendChild(style); 

     return style.sheet; 
    })(); 
    sheet.insertRule("\ 
     #gridContainer {\ 
      width: 100%;\ 
      height: 100%;\ 
     }\ 
    ", 0); 
</script> 
</body> 
</html>

kaynak

2015-03-08 klinore

Firefox ve Chromium üzerinde çalışıyor gibi görünüyor. – Oriol

Firefox ve Chromium'da boş bir etiketi alıyorum ... Çalıştığım tüm kodu göstermek için sorumu düzenledim. Neyin yanlış gittiğinden emin değil ... – klinore

XML ağaç döndü size takılı kuralları göremiyorum sadece budur, Biraz kafa karıştırıcı ama kod aslında yapar çalışır.

Run

var style = (function() { 
 
    // Create the <style> tag 
 
    var style = document.createElement("style"); 
 

 
    // WebKit hack 
 
    style.appendChild(document.createTextNode("")); 
 

 
    // Add the <style> element to the page 
 
    document.head.appendChild(style); 
 
    
 
    console.log(style.sheet.cssRules); // length is 0, and no rules 
 

 
    return style; 
 
})(); 
 
style.sheet.insertRule('.foo{color:red;}', 0); 
 
console.log(style.sheet.cssRules); // length is 1, rule added

<p class="foo"> 
 
    I am some text 
 
</p>

yukarıdaki pasajı ve CSS kuralı geçerlidir görebilirsiniz:

kodunuzu çalıştığını doğrulamak için, orada iki test yapabileceğiniz bulunmaktadır. Ve konsolda cssRules özelliği de değişir.

genellikle tarayıcı uzantıları DOM eklenir özel stil-sayfaları oluşturduğunuzda kaydetti ve ayıklarken onlar müfettiş olarak boş stil sayfaları görünür olduğu.

kaynak

2015-03-08 19:36:32

Ha! Bunu test etmeyi düşünmeliydim. Müfettişte boş göründüğünden, uygulanmadığı varsayımını yaptım. Teşekkürler Awal :) – klinore

@ user2522373 no problem :) Bir dahaki sefere, konsolun herşeye sessiz bir şahit olduğunu unutmayın. –

Metnin, öğenin içinde beklendiği gibi görünmemesi garip. Görüyorum ki kullanım durumlarımda işe yaramıyor. – trusktr

Bu sürüm web archive dan JavaScript ile Awal cevabı ve Tamamen Pwn CSS dayanmaktadır. kimlik parametresi, getElementById ile styleSheet'e erişmek için yararlıdır ve ortamı parametresi, optinaldir ve varsayılan olarak 'screen' olur. styleSheet.sheet'u döndürüyorum, bu sadece benim tercihim.

function createStyleSheet (id, media) { 
    var el = document.createElement('style'); 
    // WebKit hack 
    el.appendChild(document.createTextNode('')); 
    el.type = 'text/css'; 
    el.rel = 'stylesheet'; 
    el.media = media || 'screen'; 
    el.id = id; 
    document.head.appendChild(el); 
    return el.sheet; 
}

kaynak

2016-04-22 19:38:45

CSSStyleSheet.insertRule() nasıl düzgün şekilde kullanılır?

cevap

İlgili konular