Question

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

我无法阅读CSS变量的值并尝试了很多事情......在我输入问题时我在“可能已经有你答案的问题”中找到解决方案之前。

无论如何，我附上了一个片段，因为我需要知道：
⋅⋅⋅为什么方法1不起作用？
⋅⋅⋅有没有办法使用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，则需要使用内置的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

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

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

所以，我尝试实现一个简单的扩展，检查被修改的属性是否是Custom属性（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和3.1.1测试了此扩展程序，但如果您发现任何错误，请告诉我，或者如果您有任何建议。

现在您只需在导入jQuery之后添加扩展，或者在调用$.fn.css之前的任何时候添加扩展。这是工作片段：

＆＃13;

(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'));

＆＃13;

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

＆＃13;

<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>

＆＃13;

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变量/自定义属性

3 个答案: