Belirli bir öğeye uygulanan tüm css biçimlerinin listesini al

Question

Yalnızca belirli bir html öğesine uygulanan kullanıcı tanımlı hesaplanmış css stillerinin listesini almanın bir yolu var mı? Stiller, şu anda mevcut olan herhangi bir modada, harici css dosyası veya gömülü/satır içi stil tarafından uygulanabilir. sağlanan

.p1{font-size:14px; line-height:20px;}

<style> 
 
    .p1{ line-height:18px; color:green;} 
 
</style> 
 
<p class="p1" style="color:red;">Some Paragraph</p>

Şimdi olmasını gerektirir listesi boşlukları/null/default değerleri içeren hesaplanan stilleri değil sürü bir öğeye uygulanan tek kullanıcı tanımlı bilgisayarlı tarzıdır window.getComputedStyle() tarafından

sadece ben ilk kez bir siteyi ziyaret bir senaryo koymak istiyorum, benim soru üzerine daha doğrusu ben, sadece, kullanıcı almak için geliştirici araç çubuğunu kullanmak istiyorum tanımlı stiller programlı olarak (veya bir şeyler yazarak) konsolda e-scriptler). Yani bu akılda senaryoyu alarak i gerektiren son çıkış gerekirse

{ 
    'color':'red', 
    'line-height' : '18px', 
    'font-size' : '14px' 
} 

, benim sorgu veya explaination herhangi bir yanlışlık beni düzeltin bazen daha fazla katta olmalıdır.

Answer 1

aradığınız yöntemdir:

window.getComputedStyle() 

Bkz:Mozilla Developer Network (MDN) on Window.getComputedStyle();

http://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Window.getComputedStyle() yöntem bir elementin tüm CSS özelliklerinin değerlerini verir aktif stil sayfalarını uyguladıktan ve herhangi bir temel hesaplamayı çözdükten sonra bu değerler içerebilir. sorunuzu biçimlendirme ve stiller dayanarak

---

:

var para1 = document.getElementsByClassName('p1')[0]; 
var para1Styles = window.getComputedStyle(para1); 

para1Color = para1Styles.getPropertyValue('color'); // red 
para1FontSize = para1Styles.getPropertyValue('font-size'); // 14px 
para1LineHeight = para1Styles.getPropertyValue('line-height'); // 20px 

ayrıca ikinci bildirerek, sözde elemanlar gelen stil özellik değerleri alıp sağlayacak aynı yöntem (isteğe bağlı) argüman. Örn.,

örn.

var para1AfterStyles = window.getComputedStyle(para1, ':after'); 

Answer 2

Ben de bu soruya bir cevap arıyordum. Bir çözüm buldum ama biraz hackish. Sorunu bir şekilde çözüyor.

function getAppliedComputedStyles(element, pseudo) { 
    var styles = window.getComputedStyle(element, pseudo) 
    var inlineStyles = element.getAttribute('style') 

    var retval = {} 
    for (var i = 0; i < styles.length; i++) { 
     var key = styles[i] 
     var value = styles.getPropertyValue(key) 

     element.style.setProperty(key, 'unset') 

     var unsetValue = styles.getPropertyValue(key) 

     if (inlineStyles) 
      element.setAttribute('style', inlineStyles) 
     else 
      element.removeAttribute('style') 

     if (unsetValue !== value) 
      retval[key] = value 
    } 

    return retval 
} 

Yardım ederse bana bildirin.

Yalnızca modern tarayıcılarda desteklenen css unset özellik değerini kullanır. https://developer.mozilla.org/en/docs/Web/CSS/unset#Browser_compatibility