Question

Does jQuery have a way to get and set the value of CSS variables? (MDN - Using CSS variables)

I have tried using the normal css function $(".element").css("--varname", 1), but it doesn't work.

I can use normal DOM functions, but I would prefer not to mix that and jQuery:

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

I am using this variable in a transform, so getting the result of using the variable gives a matrix3d() string. I need to get the value for some calculations in JS

Answer 1

You're close:

Setter:

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

Getter:

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

For examples:

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

Would set the display value to none.

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

Would return "none" as the current value of the css property.

Edit for the literal CSS variable Comment:

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

Will change the variable of an existing element, so assuming the variables exist you can swap styles around in this manner.

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

Unfortunately this returned "rgb(255, 0, 0)" for me. It grabbed the RGB that the variable represents. This was tested in Chrome, so your mileage may vary.

Answer 2

You can use $.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>

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

Answer 3

You are declaring an invalid css name. Try using .style attr().

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

Example : https://jsfiddle.net/e6jqa3pn/1/

Answer 4

您可以使用cssVar (on npm : jq-cssvar)，它是一个jQuery插件，可以在css变量时完成工作。

（这里也是github repo的链接）。

Answer 5

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

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

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

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

我提供链接，因为代码可能会改变，如果有错误，但我认为它很好，因为它非常简单。

Get or Set CSS Variable

5 个答案: