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

JavaScript は無効な CSS プロパティ値を取得できますか?

カスタム CSS プロパティは、先頭にダッシュが付いている名前で示され、定義およびアプリケーション内の固有のスタイルにアクセスします。ただし、これらのカスタム プロパティが無効であるかブラウザで認識されない場合、JavaScript はその値にアクセスできますか?

説明

CSSStyleDeclaration オブジェクトは、次のスタイル プロパティを公開します。 JavaScript の要素。 「-my-foo」などの無効なプロパティ名が見つかった場合、通常、このオブジェクトはそのプロパティをスキップし、他の有効なプロパティを続行します。

DOM-Level-2 スタイルの仕様では、宣言ブロックは、無効なものも含めて、CSSStyleDeclaration インターフェイスを通じてアクセスできる必要があります。ただし、実際には、Chrome や Firefox などのブラウザはこの動作をサポートしていません。

無効な CSS プロパティの値に JavaScript から直接アクセスできないにもかかわらず、代わりのアプローチとして生の CSS テキストを解析する方法があります。対応するスタイル要素からスタイル プロパティを抽出すると、カスタム プロパティの値が無効であっても手動で識別して取得できます。

コード例

次のコードは、生の CSS テキストを解析し、「-my-foo」プロパティの値を取得する方法を示しています。

const styleText = document.getElementsByTagName("style")[0].innerText;
const propertyName = "-my-foo";

const value = styleText.match(new RegExp(`\b${propertyName}:\s*(.+?)\b`, "i"))[1];

注: この方法では、一致する正規表現が必要です。カスタム プロパティ名を入力し、その値を抽出します。これは低レベルのソリューションとみなされ、すべてのシナリオにとって最も効率的または適切な方法であるとは限りません。

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