jQuery .css, how to translate it into Javascript

Question

I have the following jQuery code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {


      setTimeout(function() {
        $('.green.bar .inner').css('width', '20%')
      },1000);


    });
</script>

And the html is:

<div class="green bar">
<div class="inner" style="width:10%"></div>
</div>

How can I do what the jQuery code does using just JavaScript?

Thanks a lot

Just give in and come to the dark side. Don't make your life more difficult by trying to do something that jQuery already does for you. — Doozer Blake
– Doozer Blake, Commented Sep 29, 2011 at 14:03
I think he means "without jQuery" when he says "just JavaScript". And honestly, I use jQuery exactly so I don't have to write this in plain javascript. — Felipe Leusin
– Felipe Leusin, Commented Sep 29, 2011 at 14:03
Ugh. All these "jQuery is JavaScript" comments that get posted on SO are just pedantic noise. The intent is simple and clear. How to accomplish this without the jQuery abstraction from the native API. Goodness. — user113716
– user113716, Commented Sep 29, 2011 at 14:05

Justin Niessner · Accepted Answer · 2011-09-29 14:05:04Z

3

If you mean without using jQuery:

// If you only want to operate on the first match
setTimeout(function(){
    document.querySelector('.green.bar .inner').style.width = '20%';
});

Or:

// If you want to operate on all matches
setTimeout(function(){
    var elements = document.querySelectorAll('.green.bar .inner');
    for(e in elements){
        elements[e].style.width = '20%';
    }
});

answered Sep 29, 2011 at 14:05

Justin Niessner

246k40 gold badges416 silver badges546 bronze badges

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

1 Comment

Doozer Blake Over a year ago

To the OP, keep in mind this will work in most browsers, but in the IE world, IE8 and above. Specifically those that support the W3C Selectors API

Collectives™ on Stack Overflow

jQuery .css, how to translate it into Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related