JavaScript はどのようにして HTML 要素の CSS プロパティにアクセスできるのでしょうか?

JavaScript を使用した CSS プロパティの抽出

JavaScript を介して HTML 要素の CSS プロパティにアクセスすることは、動的 Web 開発にとって不可欠なスキルです。 「style.css」などの外部スタイルシートが Web ページにリンクされているシナリオを考えてみましょう。特定の CSS プロパティを操作するには、JavaScript を使用して値を取得する必要があります。

CSS プロパティを読み取るためのオプション

これを実現するには、主に 2 つの方法があります。

1. スタイル オブジェクトへの直接アクセス: 最新のブラウザでは、document.styleSheets オブジェクトにアクセスすると、ドキュメントに適用されるすべてのスタイル ルールの包括的なリストが提供されます。このオブジェクトを解析することにより、個々のプロパティを見つけて抽出することができます。ただし、このメソッドは複雑さと制限のためお勧めできません。
2. GetComputedStyle メソッド: より汎用性の高いアプローチには、createElement() メソッドを使用して、目的のスタイル構成を持つ要素を作成することが含まれます。この要素に getComputedStyle() または currentStyle (IE) メソッドを適用すると、特定の CSS プロパティ値を取得できます。

例: Color プロパティの抽出

次のコード スニペットを考えてみましょう:

<code class="javascript">function getStyleProp(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    } else if (elem.currentStyle) {
        return elem.currentStyle[prop]; // IE
    }
}

window.onload = function () {
    var d = document.createElement("div"); // Create div
    d.className = "layout";                // Set class = "layout"
    alert(getStyleProp(d, "color"));       // Get property value
};</code>

この関数は、ターゲットの要素と目的の CSS プロパティ (例: "color") の 2 つのパラメータを取ります。ターゲット要素と同じスタイルを持つ一時的な div 要素を作成することにより、コードは指定されたプロパティ値を抽出して返します。

高度なテクニック

スタイル プロパティを取得するには、インライン スタイルを除外するには、getNonInlineStyle() 関数を使用できます。

<code class="javascript">function getNonInlineStyle(elem, prop) {
    var style = elem.cssText; // Cache the inline style
    elem.cssText = "";        // Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); // Get inherited value
    elem.cssText = style;     // Add the inline style back
    return inheritedPropValue;
}</code>

この関数は、インライン スタイルを一時的に消去することにより、スタイルシートから継承されたプロパティ値を明らかにします。

以上がJavaScript はどのようにして HTML 要素の CSS プロパティにアクセスできるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。