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。

当我在谷歌浏览器中测试它时，它没有显示任何错误或错误，但该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>

Answer 2

有很多错误。

<script>
var change = function(){
alert("sam");
for(var i=0; i <=200; i++){
     var z = i;


} 
        var x = document.getElementById("div1");
       x.style.width = z+'px'; 

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

http://jsfiddle.net/6WsCR/

顺便说一句，你不需要循环，可以这样做：

<script>
 var change = function(z){
        var x = document.getElementById("div1").style.width = z+'px';
};
</script>
    <button onclick="change(500);"> click</button>

编辑：你想要的是这个

<script>
var changeAnimate = function(){
$('#div1').animate({
width: '200px',
  }, 5000, function() {
  });
    }
</script>
<style type="text/css">
#div1{
    width:100px;
    height: 100px;
    background-color:#ccc;
}
</style>
<div id="div1"></div>
<button onclick="changeAnimate();"> click</button>

http://jsfiddle.net/pfP37/

Answer 3

一切都会变得更加复杂：

var change = function() {

    var div = document.getElementById("div1"),
        startWidth = div.offsetWidth;

    for (var i = 0; i <= 100; i++) {
        (function(i) {
            setTimeout(function() {
                div.style.width = startWidth + i + 'px';
            }, i * 10)
        })(i) // wrap setTimeout in a closure
    }
};

几个笔记。

1）。您需要计算初始宽度。您可以使用offsetWidth属性。

2）。确保您不要在循环中重新选择div元素。

3）。你需要一个闭包和setTimeout来实现滑动效果。 Closure用于将setTimeout与i变量的快照（循环中的当前值）绑定。

4）。在循环中i >= 200应为i <= 200。

演示：http://jsfiddle.net/z58p6/1/

Answer 4

试试这个，

  <script type="text/javascript">
    function resizeDiv(id,ud) {
       var Div=document.getElementById(id);
       var width=parseInt(Div.style.width)+ud;
       if (width>=1){
          Div.style.width = width + "em"; 
       }
    }
  </script>
  <div id="div_test" style="height: 1em; width: 1em; border:1px solid;">You div</div>
  <input type="button" value="increase" onclick="resizeDiv('div_test', 1);">
  <p></p> 
  <input type="button" value="decrease" onclick="resizeDiv('div_test', -1);">

Answer 5

您需要添加“px”，如下所示

var z = String（i）+“px”;

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

};

div的宽度没有增加

5 个答案:

演示：http://jsfiddle.net/z58p6/1/