インライン スタイルがマスター スタイルシート設定をオーバーライドする場合に、JavaScript を使用して計算スタイルにアクセスする方法

JavaScript を使用してマスター スタイルシートからスタイルにアクセスする

マスター スタイルシートで div の表示プロパティを "none" に設定し、 myDiv.style.display を使用して JavaScript 経由でアクセスすると、空の戻り値が返される可能性があります。これは、インライン スタイルと計算スタイルには区別があるためです。

インライン スタイルは HTML 要素自体に直接設定されますが、計算スタイルは、要素に適用されるすべてのスタイルの組み合わせです。外部スタイルシートまたは親要素。インライン スタイルが存在する場合、競合する計算スタイルはすべてオーバーライドされます。

JavaScript を介して要素の style プロパティにアクセスする場合、インライン スタイルのみを読み取ることができます。したがって、マスター スタイルシートで表示プロパティを「none」に設定していても、それをオーバーライドするインライン スタイルがある場合、myDiv.style.display は空の文字列を返します。

計算されたスタイルにアクセスするには、次のものが必要です。 getComputedStyle() 関数を使用します。この関数は、外部スタイルシートまたは親要素に設定されたスタイルを含む、要素のすべての計算されたスタイルを含むオブジェクトを返します。

getComputedStyle() を使用して計算された表示プロパティを取得する方法の例を次に示します。

var display = getComputedStyle(myDiv).display;

getComputedStyle() を使用すると、インライン スタイルによってオーバーライドされている場合でも、要素の計算されたスタイルにアクセスできます。

以上がインライン スタイルがマスター スタイルシート設定をオーバーライドする場合に、JavaScript を使用して計算スタイルにアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。