Question

当我们想要增加宽度时，如果元素或高度我们总是认为... okey for循环将成为该代码的某些部分...因为你知道我们必须一次又一次地继续增加值宽度属性。

我们脑子里有一些模糊的代码：

var somefunction = function(elementName,width){

 var var1 = docuemnt.getElementById(elementName), //some more variable

 /*

   maybe complicated or simple codes

 */ 

  for( var i = var1.clientWidth; i<=....., i++ ){

   // some code in this loop

  }  
}

你知道当我搜索如何增加元素的宽度时，所有答案代码都有for循环

但是现在我想要在不使用任何循环的情况下使用其他方法吗？

谢谢！

Answer 1

执行此操作的最佳方法是使用setInterval以下代码执行此操作：

它只使用setInterval。你知道它会在每个Interval之后继续重复。

function c (e,s,v){
	var ele = document.getElementById(e),
	width= ele.clientWidth;

	var incInWidthOfEle = setInterval(function(){

			if (width <= s) {
					increase();
				}else{
					stop_();
				};

			}, v);   

	var increase = function(){

			ele.setAttribute('style', 'width:' + width +'px;');
			width++ ;
	};

	var stop_ = function(){

		clearInterval(incInWidthOfEle);

	};

};
c('d1', 500, 10);

#d1{
		width: 100px;
		height: 100px;
		background-color: #eee;
	}

<body>

<div id="d1" style="width:200px;"></div>


</body>

Answer 2

使用javascript和transition

创建代码段

window.onload = function(){
    setWidth(500);
}

function setWidth(width) {
  var1 = document.getElementById("div");
  div.style.width = width + "px";
}

<style>
  #div {
    background: #0099CC;
    width: 100px;
    height: 50px;
    transition: width 5s;
    -moz-transition: width 5s;
    -webkit-transition: width 5s;
  }
</style>
<div id="div"></div>

如何在不使用任何循环的情况下增加元素的宽度

2 个答案: