JavaScript 允许访问 CSS 自定义属性（也称为 CSS 变量）

Question

如何使用JavaScript（普通或jQuery）获取和设置CSS自定义属性（通过样式表中的var(…)访问的属性）？这是我不成功的尝试：单击按钮会更改通常的font-weight属性，但不会更改自定义--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

原生解决方案

我个人的做法

热门工具标签

Hot Questions

Hot Tools

vc9-vc14（32+64位）运行库合集（链接在下方）

VC9 32位

php程序员工具箱完整版

VC11 32位

SublimeText3汉化版

热门话题

热门文章