Javascript 获取或设置CSS变量

jQuery是否有办法获取和设置CSS变量的值？（）

我试过使用普通的css函数

$（“.element”）.css（“--varname”，1）

，但它不起作用

我可以使用普通的DOM函数，但我不希望将其与jQuery混合使用：

element.style.getPropertyValue("--varname");
element.style.setProperty("--varname", value);

我在

转换中使用这个变量，因此获得使用该变量的结果将给出一个
matrix3d（）
字符串。我需要得到JS中某些计算的值，你很接近了：

塞特：

$(".element").css("varname", "value");

吸气剂：

$(".element").css("varname");

例如：

$(".element").css("display", "none");

将显示值设置为“无”

$(".element").css("display");

将返回“none”作为css属性的当前值

编辑文字CSS变量注释：

$(".div").css("background-color", "var(--main-color2)");

将更改现有元素的变量，因此假设变量存在，可以用这种方式交换样式

$(".div").css("background-color");

不幸的是，这为我返回了“rgb（255，0，0）”

。它抓取了变量表示的RGB。这是在Chrome中测试的，因此您的里程数可能会有所不同。

您正在声明一个无效的css名称。尝试使用

.style

attr（）

---

示例：

您可以使用

$.cssHooks

，

$.support

（函数（$）{
//首先，检查是否支持CSSHook
如果（！$.cssHooks）{
//如果不是，则输出错误消息
抛出（新错误（“需要jQuery 1.4.3或更高版本”）
+“使此插件工作”）；
}
//包装在文档就绪调用中，因为jQuery编写
//CSSHOOK在这个时候，将吹走你的功能
//如果它们存在的话。
$（函数（）{
$.cssHooks[“mainBgColor”]={
get：函数（元素、计算、额外）{
//获取CSS属性的句柄
返回elem.style.getPropertyValue（$.support[“mainBgColor”]）
||window.getComputedStyle（elem）
.getPropertyValue（$.support[“mainBgColor”]）
},
设置：功能（元素、值）{
//句柄设置CSS值
elem.style.setProperty（$.support[“mainBgColor”]，值）；
返回元素
}
};
$.support[“mainBgColor”]=“--mainBgColor”；
console.log（$（“h1”）.css（“mainBgColor”）；/`“brown”`
$（“h1”）.css（“mainBgColor”、“green”）；
console.log（$（“h1”）.css（“mainBgColor”）；/`“绿色”`
});
})（jQuery）
h1{
--主背景颜色：棕色；
}
h1{
背景色：var（--主背景色）；
}

你好，普朗克！
您可以使用它，它是一个jQuery插件，在涉及css变量时可以完成任务

（这里还有到的链接）。
我已经为jQuery css方法创建了monkey补丁，因此您可以使用它：

$(".element").css("--varname", 1);

当变量以两个破折号开头时，补丁方法调用
getPropertyValue
或
setProperty
，否则调用原始方法（它还将对象作为第一个参数处理）


我之所以提供链接，是因为如果代码中有bug，代码的要点可能会发生变化，但我认为这没关系，因为它非常简单。
您缺少{}$（'.classname'）.css（{'display'：'block'}）@Nitin我想他指的是文字css变量：css变量与特定元素无关，它们在文档的
部分中使用。@Barmar不是真的，css变量是在特定元素上设置的，然后被继承。
display
不是css变量，而是样式名。我不太想知道，我在
转换中使用变量，因此使用
.css
返回
matrix3d（）
字符串。我计划在计算中使用变量的值，所以我需要该值本身。
$(".element").css("--varname", 1);