getComputedStyle&currentStyle&スタイル:スタイルが表現と互換性のあるいくつかの方法を計算します

window.getComputedStyleが(要素、[文字列])

  • 1基準パターン要素を取得する必要があり、基準2指定擬似要素列(例えば、「::後」、比較必要ないヌル)に設けられた素子2パラメータCSSスタイルの擬似要素を取得することができます
  • 最終的な効果素子の結果にスタイルルールを積層しCSSStyleDeclarationオブジェクト、すべてのCSSスタイル(内部、外部、インライン)を返します
  • 得られスタイルだけで設定することはできません読み取ることができます
  • 一般的にFFで使用される、IE9 +は、このメソッドに次のことをサポートしていません。

element.currenStyle

  • 最終的な効果素子の結果にスタイルルールを積層しCSSStyleDeclarationオブジェクト、すべてのCSSスタイル(内部、外部、インライン)を返します
  • IEとOperaだけはの使用をサポート
  • プロパティはメソッドではありません

element.style:

  • 唯一のインラインスタイルを操作することができ、内部および外部のスタイルを取得することはできません
  • スタイル属性を設定することができます取得します。

 

スタイルはその機能をパッケージの取得、JSのツールを書面での互換性:

輸出デフォルトのクラスmyUtils {
     静的getCompatibleStyle(elemOrSelect、擬似){
もし(!elemOrSelect)リターンもし(elemOrSelect.constructor ===文字列)elemOrSelect = document.querySelector(elemOrSelect)。 もし(疑似!)を返すgetComputedStyle(elemOrSelect、擬似)。 返す elemOrSelect.currentStyleを?elemOrSelect.currentStyle:getComputedStyle(elemOrSelect、ヌル); } }

コール:

<スクリプトタイプ=「モジュール」> 
        からインポートutilsの「./myUtils.js」
        console.log(utils.getCompatibleStyle( "DIV"、ヌル).backgroundColor)。
        console.log(utils.getCompatibleStyle( "スパン"、 "::後" ).display)。
</ SCRIPT>

 

おすすめ

転載: www.cnblogs.com/ltfxy/p/12275251.html