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

我怎样才能只使用 JavaScript 来完成 jQuery 代码所做的事情？

非常感谢

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