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

how to increase the width of an element without using any loops

本文关键字：情况下 增加 元素 循环 任何      更新时间：2023-09-26

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

我们脑海中有一些模糊的代码，如下所示：

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循环

但是现在我想要的是，在不使用任何循环的情况下，是否有其他方法可以解决此函数？

谢谢！

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

它只使用setInterval . 你知道它会在每个设定的间隔后继续重复自己。

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>

下面是一个使用 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>

相关文章：