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