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

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

- 接頭辞を使用してカスタム CSS プロパティを作成することができます。しかし、これらのカスタム プロパティには JavaScript からアクセスできますか?

少なくとも Chrome や Firefox などの主要なブラウザでは、答えは残念ながら「いいえ」です。無効な名前を持つカスタム CSS プロパティは、CSS パーサーによって単純に無視されます。たとえば、次の CSS について考えてみましょう:

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

この CSS が div に適用されていても、JavaScript を使用して -my-foo プロパティにアクセスしようとすると、何も返されません。 CSSStyleDeclaration オブジェクトには、幅や高さなどの有効なプロパティのみが含まれます。

この動作は、CSSStyleDeclaration 仕様に従っています。仕様では、オブジェクトには「指定されたプロパティ」のみを含めるべきであると記載されており、これはカスタム プロパティが認識されないことを意味します。ただし、実装によってはカスタム プロパティへのアクセスをサポートしている場合もありますが、これは保証されません。

アプリケーションにとってカスタム CSS プロパティへのアクセスが重要な場合は、生の CSS テキストを解析することで JavaScript の制限を回避できます。これは、スタイル要素の innerText プロパティを使用して実行できます。

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

このアプローチは機能しますが、CSSStyleDeclaration オブジェクトからプロパティに直接アクセスするほど簡単ではありません。さらに、CSS テキストの追加の解析と操作が必要です。

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