修改 jQuery 中的 CSS 變量/自定義屬性
[英]Modify CSS variables / custom properties in jQuery
問題描述
在我的應用程序中，我有一些參數想要使用 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>
3 個解決方案
解決方案1
9 已采納 2018-03-01 11:24:21
jQuery 僅支持3.2.0 及更高版本的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>
解決方案2
1 2018-03-03 19:31:07
正如BoltClock 在他們的回答中提到的，jQuery 從 3.2.0 版開始添加了對 CSS 變量的支持。
但是如果由於某種原因無法升級到更高版本，您仍然可以擴展 jQuery 的$.fn.css方法以使用自定義屬性。
所以這是我嘗試實現一個簡單的擴展，檢查被修改的屬性是否是自定義屬性（通過檢查它是否以兩個連字符開頭）。 如果是，則使用普通 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之前的任何時候添加擴展。 這是工作片段：
(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>
解決方案3
0 2020-05-19 15:04:26
這是我的帶有現場演示的版本 -
// 帶顏色的數組
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]);
}
}
setTimeout中的函數不會修改$ scope變量/ CSS屬性
[英]Function inside setTimeout doesn't modify $scope variables / CSS properties
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.