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

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

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

div {
    -my-foo: 42;
}

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

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

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

document.getElementsByTagName("style")[0].innerText

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