JavaScript でカスタムまたは無効な CSS プロパティの値にアクセスできますか?

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

Web 開発の領域では、CSS プロパティは要素のスタイリングに不可欠です。多数の標準 CSS プロパティが定義されていますが、独自のカスタム プロパティを使用したい場合があります。ここで疑問が生じます: JavaScript でこれらの無効な CSS プロパティまたはカスタム CSS プロパティの値にアクセスできますか?

これを調べるには、次の CSS を検討してください:

<code class="css">div {
    -my-foo: 42;
}</code>

そのようなスタイルがあると仮定します。宣言では、指定された div 要素に対して JavaScript を使用して -my-foo プロパティの値を取得できますか?

従来のメソッド

残念ながら、無効な値に直接アクセスすることはできません。 CSS プロパティは従来の方法では実現できません。ブラウザーは認識できないプロパティやカスタム プロパティを無視する傾向があるため、CSSStyleDeclaration オブジェクトにはそれらのプロパティがリストされていません。たとえば、指定された CSS の例では、style:CSSStyleDeclaration オブジェクトには width プロパティのみが含まれます。

可能な代替手段

従来の方法は機能しない可能性がありますが、次のような方法があります。別のアプローチ。未加工の CSS テキストを手動で解析して、カスタム プロパティの値を取得できます。たとえば、次のコードを使用できます:

<code class="javascript">document.getElementsByTagName("style")[0].innerText;</code>

このコードは、生の CSS テキスト全体を取得し、関心のあるカスタム プロパティ値を検索できるようにします。このメソッドには追加のコードが必要であることに注意してください。

注:

DOM-Level-2 スタイル仕様で定義されている CSSStyleDeclaration インターフェイスに注目する価値があります。は、無効なプロパティを含む、指定されたすべてのプロパティがインターフェイス経由でアクセスできる必要があることを意味します。ただし、現在、ほとんどのブラウザは仕様のこの部分に準拠していません。

以上がJavaScript でカスタムまたは無効な CSS プロパティの値にアクセスできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。