特定の要素に適用されるすべてのCSSスタイルのリストを取得

Question

特定のhtml要素に適用されるユーザー定義の計算済みCSSスタイルのみのリストを取得する方法はありますか。スタイルは、外部CSSファイルまたは埋め込み/インラインスタイルのいずれかで現在利用可能な任意の方法で適用できます。

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

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

提供される今、私が持っている必要がリストには、構成要素ではない空白/ nullを/デフォルト値を含む計算スタイルの全体の束に適用されるだけで、ユーザー定義の計算スタイルですwindow.getComputedStyle（）

私の質問にちょうど正確には、最初にサイトにアクセスするシナリオを入れたいと思います。開発ツールバーを使用して、定義されたスタイルをプログラムで（またはsomコンソール上のスクリプト）。だから、心の中でこのシナリオを取って、私が必要と最終的な出力は、必要に応じて

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

は、私のクエリまたは、について説明内の任意のミスで私を修正してくださいBE-必要があります。

Answer 1

あなたが探している方法は次のとおりです。

window.getComputedStyle() 

を参照してください：Mozilla Developer Network (MDN) on Window.getComputedStyle();

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

Window.getComputedStyle()方法は、要素のすべてのCSSプロパティの値を与えますアクティブなスタイルシートを適用し、それらの値に含まれる基本的な計算を解決した後。あなたの質問では、マークアップとスタイルに基づいて

---

：

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 

また、あなたが秒を宣言することによって、擬似要素からスタイルプロパティの値を引くことを可能にするのと同じ方法（オプション）引数。

たとえば、

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

Answer 2

私はこの質問に対する回答も探しています。私は解決策を思いついたが、ちょっとハッキリしている。それはいくぶん問題を解決します。

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 
} 

助けがあれば教えてください。

最新のブラウザでのみサポートされているCSS unsetプロパティ値を使用します。 https://developer.mozilla.org/en/docs/Web/CSS/unset#Browser_compatibility