Geek Answers Handbook

Access CSS variables / user properties in jQuery

In my application, I have some parameters that I would like to put in CSS variables using jQuery. And I also wanted to read them.

I had problems reading values ​​back in CSS variables and much more ... before I found a solution in the "Questions Your May Have Already Answered" section when I introduced my question.

In any case, I attached the fragment because I need to know:
⋅⋅⋅ Why method 1 does not work?
⋅⋅⋅ Is there a way to get the var var value using jQuery?

I feel like it doesn’t have a simple solution for handling CSS vars ... Am I wrong?
Of course I will use javascript solution if not. But I would like to be sure of that. Thanks in advance for any response.

// 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>
Run code
+6
source share
2 answers

jQuery only supports custom CSS properties in version 3.2.0 and later . They do not have support in 2.x or earlier versions, so access to them with help .css()will not work in these versions. If jQuery updating is not an option, you will need to use the built-in object styleto access them.

$(":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>
Run code
+6
source

BoltClock , jQuery CSS, 3.2.0.

- , jQuery $.fn.css .

, , , Custom (, ). , 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>
+1

More articles:


All Articles