JavaScriptは、CSSカスタムプロパティ（CSS変數(shù)）を直接操作し、getComputedStyle（）およびgetPropertyValue（）を介して変數(shù)値を取得し、setProperty（）を使用して変數(shù)値を更新できます。特定の手順は次のとおりです。1。getComputedStyle（element）.getPropertyValue（ ' - variable-name'）を使用して変數(shù)値を取得し、結(jié)果のスペースを削除するにはtria（）を使用する必要があることに注意してください。 2。element.style.setProperty（ ' - variable-name'、 'new-value'）を使用して、グローバル（document.documentlementなど）または特定の要素に適用できる新しい値を設(shè)定します。 3.アニメーションとトランジションを組み合わせて動的効果を?qū)g現(xiàn)することはできますが、ブラウザの互換性に注意する必要があります。 4.動作する場合は、変數(shù)の継承、範囲、および癥例感度に注意を払う必要があります。正しい使用は、テーマの切り替え、動的レイアウトなどのインタラクティブな機能を?qū)g現(xiàn)できます。

JavaScriptは、CSSカスタムプロパティ（CSS変數(shù)とも呼ばれる）と間違いなく相互作用できます。それはいくつかの隠されたトリックや高度なテクニックではありません。ブラウザがこれらの値をDOMを通じてどのように公開するかを理解すると、それは簡単です。

JavaScriptからのCSS変數(shù)へのアクセス

getComputedStyle()とgetPropertyValue()メソッドを使用して、CSS変數(shù)の値を取得できます。これは、変數(shù)の現(xiàn)在の値を読みたい場合、おそらくロジックやアニメーションで使用する場合に特に便利です。

例えば：

 const root = document.documentlement;
const bgcolor = getComputedStyle（root）.getPropertyValue（ ' -  bg-color'）;
console.log（bgcolor.trim（））; //多くの場合、先頭/後続のスペースがあるので、それをトリミングしてください

これにより、親から継承されたり、 :rootレベルに設(shè)定されたりしても、その要素で定義されているカスタムプロパティにアクセスできます。

一般的なゴッチャ： getPropertyValue() 、多くの場合、余分な空白で値を返すため、結(jié)果をトリミングすることを常に忘れないでください。

JavaScriptでCSS変數(shù)を更新します

CSS変數(shù)の値を変更するとsetProperty()を使用して要素のスタイルに新しい値を直接設(shè)定することで行われます。これは、テーマの切り替え、ユーザー入力などに基づいてレイアウトの調(diào)整などの動的なUIの変更に非常に便利です。

例：

 document.documentelement.style.setProperty（ ' -  bg-color'、 '＃ff0000'）;

その行は--bg-color変數(shù)をグローバルに更新します（ :rootで定義されていると仮定）。特定の要素をターゲットにすることもできます。

 document.queryselector（ '。box'）。style.setproperty（ ' -  text-size'、 '1.5rem'）;

これは、その特定の要素のインラインスタイルのみに影響することに注意してください。変數(shù)が継承しない限り、他の場所のすべてのインスタンスではありません。

アニメーションまたはトランジションでCSS変數(shù)を使用します

1つの強力だが使用されていない手法の1つは、CSS変數(shù)とJavaScriptを組み合わせて遷移またはアニメーションを制御することです。たとえば、色のテーマをスムーズに変更するか、間隔を動的に調(diào)整することをお勧めします。

移行でそれを行う方法は次のとおりです。

 ：根 {
   - メインカラー：＃007bff;
  トランジション： - メインカラー0.3s容易さ。
}

それからJSで：

 document.documentelement.style.setProperty（ ' -  main-color'、 '＃ff0000'）;

これはほとんどの最新のブラウザで機能しますが、注意してください。すべてのブラウザがCSS変數(shù)のトランジションをネイティブにサポートするわけではありません。したがって、きれいに見えますが、必要に応じて慎重にテストするか、フォールバックを処理してください。

スコープとカスケードに注意してください

CSS変數(shù)は、通常のCSSと同じ範囲と継承ルールに従います。したがって、それらを定義することが重要です。

.theme-darkの変數(shù)を定義する場合、その要素の子供のみが変數(shù)のそのバージョンを見ることができます。 JavaScriptを介してアクセスするときは、正しい要素をターゲットにしていることを確認してください。

また、カスタムプロパティはケースに敏感であるため、 --MainColorと--maincolorは異なることに注意してください。

したがって、JSと作業(yè)するとき：

• どの要素が変數(shù)を保持するかを常に再確認してください。
• 命名と一致してください。
• 開発者ツールを使用して、予想どおりに動作しない場合は、計算されたスタイルを検査します。

基本的にそれだけです。

以上がJavaScriptはCSSカスタムプロパティとどのように相互作用できますか？の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。