Jquery css method does not set CSS3 variables

Question

Good day,

I am working with CSS3 variables to offset items and many other things in runtime however JQuery's css method ignores any attempt at setting a css var. I try the following

    $(document).ready(function() {
        $('#testdiv').css('--bgc','rgb(0,0,255)');
    });

 div
    {
        --bgc:rgb(255,0,0);
        background-color:var(--bgc);
        width:50px;
        height:50px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="testdiv"></div>

So in theory the div should initially load as a 50px by 50px red box and as soon as page loading is complete change into a blue box however the --bgc variable is never changed on the DIV. Is there any way to set this in JQuery?

@AnujKumar that is a css variable, see the css class added in the post. — Jai
– Jai, Commented Jul 14, 2016 at 12:31
I ask because I never heard of it. Try background-color instead. — Anuj Kumar
– Anuj Kumar, Commented Jul 14, 2016 at 12:32
try as attribute $('#testdiv').attr("style","--bgc:rgb(0,0,255)"); — angel.bonev
– angel.bonev, Commented Jul 14, 2016 at 12:35

theblindprophet · Accepted Answer · 2016-07-14 12:44:20Z

4

I found a pure JavaScript solution:

JS:

$(document).ready(function() {
    document.documentElement.style.setProperty('--bgc', 'rgb(0,0,255)');
});

CSS:

:root {
    --bgc: rgb(255,0,0);
}

div {
    background-color:var(--bgc);
    width:50px;
    height:50px;
}

Codepen: http://codepen.io/theblindprophet/pen/yJpZNb

Reference: Variables why should you care?

edited Jul 14, 2016 at 12:44

answered Jul 14, 2016 at 12:32

theblindprophet

7,9577 gold badges44 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KaoSDlanor Over a year ago

Thanks, that seems to work, I wanted to be able to set it on JQuery collections but I gues $().each() will have to do

Invis1ble · Accepted Answer · 2016-07-14 12:42:35Z

0

You can set variable via vanilla javascript

$(document).ready(function() {
  $('#testdiv')[0].style.setProperty('--bgc', 'rgb(0, 0,255)');
});

$(document).ready(function() {
  $('#testdiv')[0].style.setProperty('--bgc', 'rgb(0,0,255)');
});

div
{
    --bgc:rgb(255,0,0);
    background-color:var(--bgc);
    width:50px;
    height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testdiv"></div>

edited Jul 14, 2016 at 12:42

answered Jul 14, 2016 at 12:39

Invis1ble

1,3142 gold badges18 silver badges36 bronze badges

6 Comments

Jai Over a year ago

where is vanilla javascript in your answer?

theblindprophet Over a year ago

$('#testdiv') doesn't return an array. You shouldn't need the [0]

Invis1ble Over a year ago

@Jai here: .style.setProperty() @theblindprophet try it without the [0]

Jai Over a year ago

@user1636505 yet that is not vanilla javascript. You are still in jquery and you are converting a jq object to the dom node.

Invis1ble Over a year ago

@Jai I've used jQuery so that OP can see the diff

|

Collectives™ on Stack Overflow

Jquery css method does not set CSS3 variables

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related