jsでCSSプロパティを取得する方法

CSS 属性を取得するための JS メソッド: [getComputedStyle(div)] メソッドを使用して取得します。コードは [var a = document.defaultView.getComputedStyle(div);] です。

【おすすめ関連記事：vue.js】

js で css プロパティを取得する方法:

開発にネイティブ js を使用する場合、css プロパティを取得する必要がある必要があります。 out 直接アクセスはできないようです。ネイティブ js で CSS 属性を取得する 2 つの方法を紹介します。

直接取得は失敗します。例:

window.onload = function() {
var but = document.getElementById('button');
var div = document.getElementById('getStyle');
but.onclick = function() {
alert(div.style.width);//弹出空的对话框
}
}

getComputedStyle(div) メソッドを使用します

使用例

window.onload = function() {
var but = document.getElementById('button');
var div = document.getElementById('getStyle');
but.onclick = function() {
var a = document.defaultView.getComputedStyle(div);
alert(a.width);//100px
}
}

注意事項

1. 得られるのは、ブラウザによって計算されたスタイルです。背景を取得すると、次の結果が得られます。

alert(a.background);//reb(255,0,0) none repeat sroll 0% 0% / auto padding-box border-box

なので、何を望むのかを明確に指定してください。取得したスタイルは次のようになります。

alert(a.backgroundColor);//red

2. 名前を書くときにスペースを入れないでください。

'div' を 'div'

3 にすることはできません。未設定のスタイルを取得しないでください。互換性がありません

互換性への解決策: IE8 以前のバージョンでは getComputedStyle メソッドを使用できませんが、currenrStyle メソッドを使用してください

a = div.currentStyle;
alert(a.width);

関連する無料の学習に関する推奨事項: javascript(ビデオ)

以上がjsでCSSプロパティを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。