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

JavaScript から無効なカスタム CSS プロパティへのアクセス

CSS では、-- 接頭辞を使用してカスタム プロパティを定義できます。ただし、無効な CSS プロパティまたはカスタム CSS プロパティの値に JavaScript からアクセスできますか?

質問:

次の CSS があるとします:

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

後で JavaScript で特定の div 要素の -my-foo プロパティの値を決定できますか?

回答:

CSSStyleDeclaration 内の無効なプロパティ名にアクセスしても、 Chrome や Firefox などの一般的なブラウザでサポートされているようです。指定された CSS の場合、CSSStyleDeclaration オブジェクトには有効なプロパティ width のみが含まれ、-my-foo はスキップされます。

興味深いことに、DOM-Level-2 スタイル仕様では、指定されたすべてのプロパティが CSSStyleDeclaration インターフェイスを通じて利用可能である必要があると規定されています。この動作をサポートするブラウザがある可能性があります。

DIY アプローチ:

回避策として、document.getElementsByTagName("style" を使用して生の CSS テキストを解析できます) )[0].innerText。ただし、これは面倒なアプローチになる可能性があります。

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