要素のスタイル属性値を取得するにはどうすればよいですか?

要素の特定のスタイル属性値を取得したい場合は、何をする必要がありますか?以下に私が行った方法を示しますので、お役に立てれば幸いです。

1, Element.style.Attribute name

要素のスタイルをインラインスタイルで記述する必要があります(スタイルシートに書いても機能しません)

console.log ( box.style.height) ->null

実際のプロジェクトでは、値を取得するためにすべてのスタイルをインラインで記述することができないため、このメソッドは一般的には使用されません(htmlとcssの分離は達成できません)。

2. window.getComputedStyle (現在の操作の要素オブジェクト、現在の要素の疑似クラス (通常、疑似クラスには null を書きません)) を使用します。ブラウザによって計算されるスタイル

ブラウザによって計算されるすべてのスタイル: 現在の要素タグがページ上でレンダリングできる限り、そのすべてのスタイルはブラウザによって計算 (レンダリング) されます。いくつかのスタイルが書かれていません。

を取得することもできます。取得された結果は、CSSStyleDeclaration クラスのインスタンスです。これには、現在の要素のすべてのスタイル属性と値が含まれています

console.log( window.getComputedStyle);//function

console.log(window.getComputedStyle(box,null))["height"]

３． IE6-8 では互換性がありません。ウィンドウの下に getComputedStyle 属性がないため、エラーが報告されます

IE6-8 では、currentStyle を使用してブラウザによって計算されたすべてのスタイルを取得できます

console.log(box.currentStyle)

Console.log(box.currentStyle.height)

スタイルの互換記述メソッドを取得 getCss: [ に対応する値を取得attr] ブラウザによって計算された現在の要素のすべてのスタイルで

/*curEle:[object] 当前要操作的元素对象 
            attr:[string] 我们要获取的样式属性的名称
            1、使用try、catch来处理兼容（只有在不得已的情况下）
               前提:必须保证try中的代码在不兼容的时候报错，这样才可以catch捕获到错误信息,进行其他的处理
               不管当前的浏览器是否支持这个方法，都需要把try中的代码执行一遍，如果当前是IE7，window.getComputedStyle不兼容，但是也需要执行一遍再执行catch里面的代码，执行了两遍，消耗性能，
            2、判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容
            3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent
            获取当前浏览器是IE6-8            */function getCss(curEle,attr){var val = null;//方法2if("window.getComputedStyle" in window){//或者window.getComputedStylevar = window.getComputedStyle(curEle,null)[attr];
            }else{var = curEle.currentStyle[attr];
            }//方法1try{var = window.getComputedStyle(curEle,null)[attr];
            }catch(e){var = curEle.currentStyle[attr];
            }//方法3if(/MSIE (6|7|8)/.test(navigator.userAgent)){var = curEle.currentStyle[attr];
            }else{var = window.getComputedStyle(curEle,null)[attr];
            }return val;        
        }

console.log(getCss(box,"border"))
        console.log(getCss(box,"fontFamily"))

標準ブラウザと IE ブラウザでは依然として異なる結果が得られます -> 一部のスタイル属性では、異なるブラウザでは異なる結果が得られます。 getComputedStyle と currentStyle は特定の点にあるため、いくつかの点で異なります

複合スタイルの値を逆アセンブルして取得できます

console.log(getCss(box, "marginTop"))

上記の getCss はまだ完了していないため、以下に進みます 最初のアップグレード: 取得したスタイル値から「unit」を削除します (parseFloat は「数値 + 単位/数値」に一致する場合にのみ使用できます)

function getCss(curEle,attr){var val = null;var reg = null;if(/MSIE (6|7|8)/.test(navigator.userAgent)){var = curEle.currentStyle[attr];
            }else{var = window.getComputedStyle(curEle,null)[attr];
            }
            reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;return reg.test(val)?parseFloat(val):val; //这样写肯定不行，对于某些样式属性的值是不能去单位的，例如：float position  margin  padding  border    这些复合值 background    }

2 番目のアップグレード: 一部のスタイル属性が異なり、ブラウザーで互換性がありません。たとえば、opacity

function getCss(curEle,attr){var val = null;var reg = null;if(/MSIE (6|7|8)/.test(navigator.userAgent)){if(attr==="opacity"){
                    val = curEle.currentStyle["filter"];//把获取到的结果剖析，获取里面的数字，让数字除以100才和标准浏览器保持一致reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                    val = reg.test(val)?reg.exec(val)[1]/100:1}else{
                    val = curEle.currentStyle[attr];
                }                
            }else{//如果传递进来的结果是opacity，说明我想获得的是透明度，但是在IE6-8下获取透明度需要使用filterval = window.getComputedStyle(curEle,null)[attr];
            }}

は、小さな知識ポイントを追加しています: pseudo-class

:before :after が作成される要素ノートの前後 新しい仮想ラベル。この仮想ラベルにスタイルを追加したり、コンテンツを追加したりできます。疑似クラスを通じてフロートをクリアすることもできます。 window.getComputedStyle(box, "前").content

以上が要素のスタイル属性値を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。