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
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
- 1 You are missing {}. $('.classname').css({'display': 'block'}); – Nitin Commented Jul 11, 2016 at 19:24
- 5 @Nitin I think he meant literal css variables: developer.mozilla/en-US/docs/Web/CSS/Using_CSS_variables – Karl-André Gagnon Commented Jul 11, 2016 at 19:25
-
1
CSS variables aren't associated with specific elements, they're used in the
<style>section of the document. – Barmar Commented Jul 11, 2016 at 19:30 - @Barmar Not true, CSS variables are set on specific elements and then inherited. – GKFX Commented Mar 31, 2019 at 12:40
5 Answers
Reset to default 2You 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, puted, 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./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
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.
You are declaring an invalid css name. Try using .style attr().
$(".element").attr("style","--varname:1"); // set the value
$(".element").attr("style"); // get the value
Example : https://jsfiddle/e6jqa3pn/1/
You can use cssVar (on npm : jq-cssvar), it's a jQuery plugin that gets the job done when it es to css variables.
(Here is also a link to the github repo).
I've created monkey patch for jQuery css method so with it you can use just:
$(".element").css("--varname", 1);
the patched method call getPropertyValue or setProperty when variable start with two dashes or original method if not (it also handle object as first argument).
https://gist.github./jcubic/9ef9fa2561de8430e953e2fe62011c20
I'm providing link since the code may change in gist, if there is bug in it, but I think it's ok since it's pretty simple.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745332855a4622963.html
评论列表（0条）