在 jQuery 中修改 CSS 个变量/自定义属性

Question

在我的应用程序中，我有一些参数想使用 jQuery 放入 CSS 变量中。我也想读。

我在读取 CSS 变量的值时遇到了困难，并尝试了很多东西……在我输入问题时，在“可能已经有了答案的问题”中找到了解决方案。

无论如何，我附上了一个片段，因为我需要知道：
⋅⋅⋅ 为什么方法一不行？
⋅⋅⋅ 有没有办法使用 jQuery 获取 CSS var 值？

我觉得它缺少一个简单的解决方案来处理 CSS 变量……我错了吗？
当然没办法的话我就用javascript的办法。但我想确定一下。
提前感谢您的回答。

// This method doesn't work for writing CSS var.
$(":root").css("--color1", "red");
console.log(".css method on “:root”      :", $(":root").css("--color1"));

// This methods works for writing CSS var:
$(":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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body id="bodyID">
  <p id="p1">p with background --color1</p>
  <p id="p2">p with background --color2</p>
</body>

<html>

Answer 1

jQuery 仅支持 version 3.2.0 and later 中的 CSS 个自定义属性。 2.x 或更早版本不支持它们，因此使用 .css() 访问它们在这些版本中不起作用。如果升级 jQuery 不是一个选项，您将需要使用 built-in style 对象来访问它们。

$(":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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<p id="p1">p with background --color1</p>
<p id="p2">p with background --color2</p>

Answer 2

作为，jQuery 添加了对从 3.2.0 版本开始的 CSS 变量的支持。

但如果您由于某种原因无法升级到更高版本，您仍然可以extend jQuery's $.fn.css method使用自定义属性。

所以我尝试实现一个简单的扩展，检查正在修改的属性是否是自定义属性 (by checking that it begins with two hyphens)。如果是，则使用普通 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 < this.length; idx++) {
          this[idx].style.setProperty(prop, val);
        }
      } else {

        // Get the computed value of the property.
        return window.getComputedStyle(this[0]).getPropertyValue(prop);
      }
    } else {
      return originalFnCss.apply(this, arguments);
    }
  };
}());

注意：目前我已经用 jQuery 1.11.1, 2.2.4 and 3.1.1 测试了这个扩展，但是如果你发现任何错误，或者如果你有什么建议。

现在您只需在导入 jQuery 之后或调用 $.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 < this.length; idx++) {
          this[idx].style.setProperty(prop, val);
        }
      } else {

        // Get the computed value of the property.
        return window.getComputedStyle(this[0]).getPropertyValue(prop);
      }
    } else {
      return originalFnCss.apply(this, arguments);
    }
  };
}()); 

// This method doesn't work for writing CSS var.
$(":root").css("--color1", "red");
console.log(".css method on “:root”      :", $(":root").css("--color1"));

// This methods works for writing CSS var:
$(":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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body id="bodyID">
  <p id="p1">p with background --color1</p>
  <p id="p2">p with background --color2</p>
</body>

<html>

Answer 3

这是我的直播版本 demo -

// 颜色数组

var colConfig = [
  "default-bg",
  "hoverbg",
  "activebg",
  "maintxt",
  "subtxt",
  "listtxt"
];

let col_1 = ["#ffffff", "#f5f5f5", "#0065ff",'rgba(20, 20, 200, 1)', 'rgba(20, 20, 20, 1)', 'rgba(100, 100, 100, 0.5)'];
let col_2 = ["#000000", "#5f5f5f", "#6500ff", "#1f1f1f", "#f1f1f1", "#000088"];

$("#default").click(function () {
  changeTh(col_1);
});

$("#new").click(function () {
  changeTh(col_2);
});

function changeTh(col) {
  for (let tag in colConfig) { 
    $(":root").css("--" + colConfig[tag], col[tag]);
  }
}

在 jQuery 中修改 CSS 个变量/自定义属性

Modify CSS variables / custom properties in jQuery

javascript

jquery

css

css-variables