jQuery .css, как перевести его на Javascript

Question

У меня есть следующий код jQuery:

<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>

И HTML это:

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

Как мне сделать то, что делает код jQuery, используя только JavaScript?

Большое спасибо

Answer 1

Если вы имеете в виду без использования jQuery:

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

Или:

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