jQuery .css, how to translate it into Javascript

I have the following jQuery code:

<script src="https://ajax.googleapis.com/a开发者_开发百科jax/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

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%';
    }
});