ホームページ  >  記事  >  ウェブフロントエンド  >  ネイティブ JavaScript を使用して要素スタイルを取得することは、it_javascript スキルを取得することと同じです

ネイティブ JavaScript を使用して要素スタイルを取得することは、it_javascript スキルを取得することと同じです

WBOY
WBOYオリジナル
2016-05-16 16:34:421078ブラウズ

追記: これはスタイルを設定するものではなく、スタイルを取得するものです。要素にスタイル値が設定されていない場合は、ブラウザによって指定されたデフォルト値が返されます。 (フォーラムの手配)

1. element.style: 要素タグの style 属性に記述されたスタイル値のみを取得できます。 で定義されたスタイル値は取得できません。 "css.css ”>読み込まれたスタイル属性

コードをコピーします コードは次のとおりです:

var ele = document.getElementById('ele');
ele.style.color //色を取得します

2. window.getComputedStyle(): 現在の要素の最終的な CSS 属性値をすべて取得できます。

コードをコピーします コードは次のとおりです:

window.getComputedStyle("要素", "擬似クラス");

このメソッドは、計算されたスタイルを取得する要素と擬似要素文字列 (「:before」など) の 2 つのパラメータを受け入れます。疑似要素情報が必要ない場合は、2 番目のパラメータを null にすることができます。 document.defaultView.getComputedStyle("element", "pseudo-class"); を使用することもできます。

コードをコピーします コードは次のとおりです:

var ele = document.getElementById('ele');
var style = window.getComputedStyle(ele,null);
style.color; //色を取得します

style.length を通じてブラウザのデフォルト スタイルの数を確認できます。 IE6-8 はこの方法をサポートしていないため、後者の方法を使用する必要があります。 Firefox および Safari の場合、色は rgb 形式に変換されます。

3. element.currentStyle: IE 固有で、要素に現在適用されている最終的な CSS 属性値を返します (外部リンク CSS ファイル、ページに埋め込まれている