在jQuery中修改CSS变量/自定义属性-ModifyCSSvariables/custompropertiesinjQuery

6  

jQuery only supports CSS custom properties in version 3.2.0 and later. There is no support for them in 2.x or earlier, so accessing them with .css() will not work in those versions. If upgrading jQuery is not an option, you will need to use the built-in style object to access them.

jQuery仅支持3.2.0及更高版本中的CSS自定义属性。在2.x或更早版本中不支持它们,因此使用.css()访问它们将无法在这些版本中使用。如果不能选择升级jQuery,则需要使用内置样式对象来访问它们。

$(":root").css("--color1", "red");
console.log(".css method on “:root”      :", $(":root").css("--color1"));

$(":root")[0].style.setProperty("--color2", "lime");
console.log("[0].style method on “:root” :", $(":root")[0].style.getPropertyValue('--color2'));

#p1 {
  background-color: var(--color1);
}

#p2 {
  background-color: var(--color2);
}

p with background --color1
p with background --color2

1  

As BoltClock mentions in their answer, jQuery added support for CSS variables starting from version 3.2.0.

正如BoltClock在他们的回答中提到的,jQuery从版本3.2.0开始添加了对CSS变量的支持。

But if you can't upgrade to the higher version for some reason, you could still extend jQuery's $.fn.css method to work with the custom properties.

但是如果由于某种原因无法升级到更高版本,您仍然可以扩展jQuery的$ .fn.css方法来处理自定义属性。

So here's my attempt at implementing a simple extension that checks if the property being modified is a Custom property or not (by checking that it begins with two hyphens). If it does, the custom property is modified using plain JS, else it calls the original implementation of $.fn.css.

所以这是我尝试实现一个简单的扩展,它检查被修改的属性是否是Custom属性(通过检查它是否以两个连字符开头)。如果是,则使用普通JS修改自定义属性,否则它调用$ .fn.css的原始实现。

(function() {
  var originalFnCss = $.fn.css;
  $.fn.css = function(prop, val) {

    // Check if the property being set is a CSS Variable.
    if (prop.indexOf("--") === 0) {
      if(val) {

        // Set the value if it is provided.
        for(var idx = 0; idx 

(function() {
  var originalFnCss = $.fn.css;
  $.fn.css = function(prop, val) {

    // Check if the property being set is a CSS Variable.
    if (prop.indexOf("--") === 0) {
      if(val) {

        // Set the value if it is provided.
        for(var idx = 0; idx 

#p1 {
  background-color: var(--color1);
}

#p2 {
  background-color: var(--color2);
}

  
p with background --color1
  
p with background --color2