获取或设置 CSS 变量

Get or Set CSS Variable

本文关键字：变量 CSS 设置 获取      更新时间：2023-09-26

jQuery有办法获取和设置CSS变量的值吗？（MDN - 使用 CSS 变量）

我尝试使用普通的css函数$(".element").css("--varname", 1)，但它不起作用。

我可以使用普通的 DOM 函数，但我不想混合使用它和 jQuery：

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

我在transform中使用此变量，因此获得使用该变量的结果会给出一个matrix3d()字符串。我需要在JS中获取一些计算的值

您可以使用$.cssHooks，$.support 

(function($) {
  // First, check to see if cssHooks are supported
  if (!$.cssHooks) {
    // If not, output an error message
    throw (new Error("jQuery 1.4.3 or above is required"
                     + " for this plugin to work"));
  }
  // Wrap in a document ready call, because jQuery writes
  // cssHooks at this time and will blow away your functions
  // if they exist.
  $(function() {
    $.cssHooks["mainBgColor"] = {
      get: function(elem, computed, extra) {
        // Handle getting the CSS property
        return elem.style.getPropertyValue($.support["mainBgColor"]) 
               || window.getComputedStyle(elem)
                 .getPropertyValue($.support["mainBgColor"])
      },
      set: function(elem, value) {
        // Handle setting the CSS value
        elem.style.setProperty($.support["mainBgColor"], value);
        return elem
      }
    };
    $.support["mainBgColor"] = "--main-bg-color";
    console.log($("h1").css("mainBgColor")); // `"brown"`
    $("h1").css("mainBgColor", "green");
    console.log($("h1").css("mainBgColor")); // `"green"`
  });
})(jQuery);
h1 {
  --main-bg-color: brown;
}
h1 {
  background-color: var(--main-bg-color);
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <h1>Hello Plunker!</h1>
  <script>
  </script>
</body>
</html>

普罗兰 http://plnkr.co/edit/UyhKl8ZpZ9Pyaacl39ay?p=preview

你很接近：

二传手：

$(".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（）。

$(".element").attr("style","--varname:1"); // set the value
$(".element").attr("style"); // get the value

例 ： https://jsfiddle.net/e6jqa3pn/1/

你可以使用cssVar（在npm上：jq-cssvar），它是一个jQuery插件，当涉及到css变量时，它可以完成工作。

（这里也是指向 github 存储库的链接）。

我已经为jQuery css方法创建了猴子补丁，所以有了它，你可以只使用：

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

当变量以两个破折号开头时，修补后的方法调用getPropertyValue或setProperty，如果不是，则调用原始方法（它还将对象作为第一个参数处理）。

https://gist.github.com/jcubic/9ef9fa2561de8430e953e2fe62011c20

我提供链接是因为代码可能会在要点上发生变化，如果其中有错误，但我认为没关系，因为它非常简单。

相关文章：