javascript - div的宽度没有增加

Question

这是我的代码:

<script>
var change = function(){
    alert("sam");
    for(var i; i >=200; i++){
         var z = String(i);
        var x=  document.getElementById("div1");
       x.style.width = z;   
    } 

};
</script>
<style type="text/css">
    #div1{
        width:100px;
        height: 100px;
        background-color:#ccc;
    }
</style>
<div id="div1"></div>
<button onclick="change();"> click</button>

这段代码实际上做了什么，它会增加宽度。就像在 jquery 中一样，我们增加了宽度，因为它的宽度是滑动的，..我正在尝试像这样宽度的 javascript。

当我在 google chrome 中测试它时，它没有显示任何错误或错误，但是那个 div 的宽度没有改变，应该注意的是，它提醒 sam !

请告诉我我的错误...谢谢!

Answer 1

根据你的问题，我猜你想通过增加宽度来执行平滑过渡。

如果您可以使用 CSS3，请尝试以下代码。 Demo

<script>
var change = function(){
    alert("sam");
    var x=  document.getElementById("div1");
    x.style.width = "500px";
};
</script>
<style type="text/css">
    #div1{
        width:100px;
        height: 100px;
        background-color:#ccc;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
    }
</style>
<div id="div1"></div>
<button onclick="change();"> click</button>