简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
JavaScript を使用すると、CSS カスタム プロパティ (CSS 変数とも呼ばれます) にアクセスできます。
P粉420868294
P粉420868294 2023-10-20 22:42:04
0
2
595

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

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

P粉420868294
P粉420868294

全員に返信 (2)
P粉421119778
P粉4211197782023-10-21 17:19:53 2棟

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

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

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

リーリー

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

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

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

リーリー

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

私の個人的なアプローチ

アクセスと操作を容易にするために、ドキュメント内のすべてのアクティブな CSS グローバル変数を自動的に検出し、それらをオブジェクトにパッケージ化する小さな (CSSGlobalVariables を実装しました。 リーリー

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

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

いいねを押す+0
返信を追加
    P粉863295057
    P粉8632950572023-10-21 14:23:27 1棟

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

    いいねを押す+0
    返信を追加
      人気のトピック
      詳細>
      人気の記事
      人気のチュートリアル
      詳細>
      関連するチュートリアル
      人気のおすすめ
      最新のコース
      最新のダウンロード
      詳細>
      ウェブエフェクト
      公式サイト
      サイト素材
      フロントエンドテンプレート
      私たちについて 免責事項 Sitemap
      PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！