JavaScript ermöglicht den Zugriff auf benutzerdefinierte CSS-Eigenschaften (auch als CSS-Variablen bezeichnet).

Question

Wie kann ich benutzerdefinierte CSS-Eigenschaften (Eigenschaften, auf die über var(…) in einem Stylesheet zugegriffen wird) mithilfe von JavaScript (einfach oder jQuery) abrufen und festlegen? Hier ist mein erfolgloser Versuch: Durch Klicken auf die Schaltfläche wird die übliche Eigenschaft „font-weight“ geändert, nicht jedoch die benutzerdefinierte Eigenschaft „--mycolor“:

P粉421119778 · Answer

原生解决方案

获取/设置 CSS3 变量的标准方法是 .setProperty() 和 .getPropertyValue()。

如果您的变量是全局变量（在 :root 中声明），您可以使用以下内容来获取和设置它们的值。

// setter
document.documentElement.style.setProperty('--myVariable', 'blue');
// getter
document.documentElement.style.getPropertyValue('--myVariable');

但是，如果已使用 .setProperty() 设置了 var 的值，则 getter 只会返回该值。如果已通过CSS声明设置，将返回undefined。在这个例子中检查一下：

let c = document.documentElement.style.getPropertyValue('--myVariable');
alert('The value of --myVariable is : ' + (c?c:'undefined'));

:root{ --myVariable : red; }
div{ background-color: var(--myVariable); }

  Red background set by --myVariable

为了避免这种意外行为，您必须在调用 .getPropertyValue() 之前使用 getCompulatedStyle() 方法。然后吸气剂将如下所示：

getComputedStyle(document.documentElement,null).getPropertyValue('--myVariable');

在我看来，访问CSS变量应该更加简单、快速、直观和自然......

我个人的做法

我实现了 CSSGlobalVariables 一个小型 (以便更轻松地访问和操作.

// get the document CSS global vars
let cssVar = new CSSGlobalVariables();
// set a new value to --myVariable
cssVar.myVariable = 'red';
// get the value of --myVariable
console.log( cssVar.myVariable );

应用于对象属性的任何更改都会自动转换为 CSS 变量。

可用：https://github.com/colxi/ css-全局变量

P粉863295057 · Answer

您可以使用document.body.style.setProperty('--name', value);：

var bodyStyles = window.getComputedStyle(document.body);
var fooBar = bodyStyles.getPropertyValue('--foo-bar'); //get

document.body.style.setProperty('--foo-bar', newValue);//set

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

原生解决方案

我个人的做法