JavaScript を使用すると、CSS カスタム プロパティ (CSS 変数とも呼ばれます) にアクセスできます。

Question

JavaScript (プレーンまたは jQuery) を使用して CSS カスタム プロパティ (スタイルシートの var(…) を介してアクセスされるプロパティ) を取得および設定するにはどうすればよいですか?

これは私の失敗した試みです。ボタンをクリックすると、通常の font-weight プロパティは変更されますが、カスタム --mycolor プロパティは変更されません。 ああああ

Answer 1

ネイティブ ソリューション

CSS3 変数を取得/設定するための 標準メソッド は、.setProperty() と .getPropertyValue() です。

変数がグローバル変数 (:root で宣言) の場合、以下を使用して値を取得および設定できます。

リーリー

ただし、var の値が .setProperty() を使用して設定されている場合、ゲッターはその値のみを返します。 CSS 宣言によって設定された場合は、unknown が返されます。この例で確認してください:

リーリー リーリー リーリー

この予期しない動作を回避するには、.getPropertyValue() を呼び出す前に getCompulatedStyle() メソッドを使用する必要があります。 ゲッターは次のようになります:

リーリー

私の意見では、CSS 変数へのアクセスは、よりシンプル、高速、直観的かつ自然であるべきです...

---

私の個人的なアプローチ

アクセスと操作を容易にするために、ドキュメント内のすべてのアクティブな CSS グローバル変数を自動的に検出し、それらをオブジェクトにパッケージ化する小さな (<3kb) JavaScript ヘルパー CSSGlobalVariables を実装しました。<3kb) javascript 帮助程序，它自动检测文档中所有活动的 CSS 全局变量并将其打包到一个对象中， < /strong> リーリー

オブジェクトのプロパティに適用された変更はすべて、自動的に CSS 変数に変換されます。

利用可能: https://github.com/colxi/css-global変数

Answer 2

document.body.style.setProperty('--name', value);: を使用できます。 リーリー