Menu
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
688
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
175
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
