ホームページ > ウェブフロントエンド > CSSチュートリアル > インライン スタイルがマスター スタイルシート設定をオーバーライドする場合に、JavaScript を使用して計算スタイルにアクセスする方法

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

Mary-Kate Olsen
リリース: 2024-11-06 17:05:02
オリジナル
962 人が閲覧しました

How to Access Computed Styles with JavaScript When Inline Styles Override Master Stylesheet Settings?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート