JavaScript で無効/カスタム CSS プロパティの値を取得する方法

JavaScript で無効/カスタム CSS プロパティの値にアクセスする

「-my-foo」などのカスタムまたは無効な CSS プロパティを定義する場合、開発者はJavaScript から値を取得できるかどうか疑問に思うかもしれません。

この質問に答えるために、以下に示すような CSS があると仮定しましょう。

div {
    -my-foo: 42;
}

「-my」の値にアクセスしようとしています。 CSSStyleDeclaration オブジェクトを介して JavaScript から「-foo」を実行すると、問題が発生する可能性があります。 Chrome と Firefox の両方でのテストでは、これらのブラウザーが無効なプロパティをスキップし、有効なプロパティのみを公開することが示されています。たとえば、

div {
    width: 100px;
    -my-foo: 25px;
}

のような CSS では、CSSStyleDeclaration オブジェクトには次のキーのみが含まれます:

0: width
cssText: "width: 100px"
length: 1

したがって、JavaScript から "-my-foo" の値を取得するには、この方法は実現可能ではありません。

ただし、DOM-Level-2 スタイル仕様では、「実装 [ブラウザ] は、CSSStyleDeclaration インターフェイスを通じて、指定されたすべてのプロパティへのアクセスを提供することが期待されています。」と述べられています。これは、ブラウザーが理論的には、たとえ認識できない場合でも、オブジェクト内の無効なプロパティをリストする必要があることを示唆しています。

回避策として、生の CSS テキストを解析してカスタム プロパティの値を取得することが可能です。ただし、このアプローチは多大な労力を要し、必ずしも信頼性や効率性が高いとは限らないため、お勧めできません。

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