使用定时器改变元素的样式信息

太过爱你忘了你带给我的痛 2022-07-17 00:30 132阅读 0赞

1.使用定时器改变样式信息

obj：传入对象

attrName：需要发生改变的属性名

endValue:改变之后的最终值

function changeAttrValue(obj,attrName,endValue)\{  
            clearInterval(obj.timer);    // 避免冒泡造成的影响  
            obj.timer = setInterval(function()\{  
                var currentValue = getAttrValue(obj,attrName);   // 获得属性的当前值  
                var speed = ( parseInt(endValue) - parseInt(currentValue) )/4;  // 设置步长  
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   // 对speed取整，注意不能取到0  
                obj.style\[attrName\] = parseInt(currentValue) + speed + 'px';   //  设置最新获得的属性值  
                if( obj.style\[attrName\] == endValue )\{  
                    clearInterval(obj.timer);  // 关闭定时器  
                \}  
            \},50);  
        \}

2.获得元素的样式信息

obj：传入对象

attrName：属性名

function getAttrValue(obj,attrName)\{  
            if( obj.currentStyle )\{  
                return obj.currentStyle\[attrName\];   // IE浏览器中的获取方法  
            \}else\{  
                return getComputedStyle(obj,null)\[attrName\];  
            \}  
        \}

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery从入门到实战6：改变的是元素的属性-css 改变的是元素的样式-style属性用法

<!DOCTYPE html> <html> <head> <title>jquery01.html</title>

谁践踏了优雅/ 2022年12月04日 08:42/ 0 赞/ 119 阅读

相关如何使用JS来改变CSS样式

方法: document.getElementById("xx").style.xxx中的所有属性是什么 <table style="margin:0px; pad

电玩女神/ 2022年09月24日 12:18/ 0 赞/ 214 阅读

相关 jquery改变select的样式

[下载地址][Link 1]jquery改变select的样式，看起来比较美观。 ![1631561825.png][] dd: [Link 1]: https://y

刺骨的言语ヽ痛彻心扉/ 2022年09月11日 09:18/ 0 赞/ 159 阅读

相关 vue动态改变组件外部元素样式

主要还是通过原生的js来控制。 vue的主要开发对象是组件。组件内部控制大家都轻车熟路，但组件外部呢？比如说改变组件外部元素样式。这种问题我前不久遇到过一个。就是有个页面

古城微笑少年丶/ 2022年09月07日 01:25/ 0 赞/ 216 阅读

相关使用定时器改变元素的样式信息

1.使用定时器改变样式信息 obj：传入对象 attrName：需要发生改变的属性名 endValue:改变之后的最终值 functio

太过爱你忘了你带给我的痛/ 2022年07月17日 00:30/ 0 赞/ 133 阅读

相关改变Select三角样式

改变小三角 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-

曾经终败给现在/ 2022年06月13日 02:46/ 0 赞/ 252 阅读

相关用javascript能改变html元素样式

<body> <h1>我的第一段javascript</h1> <p id="demo">javascript能改变html元素样式</p> /

我就是我/ 2022年05月18日 10:08/ 0 赞/ 180 阅读

相关使用原生获取DOM元素的样式

我们在日常的工作场景下会遇到需要修改页面元素的样式问题，特别是使用原生js获取元素的样式，如果只是获取在元素的内联样式，可以通过Element.getAttribute(att

快来打我*/ 2022年05月11日 00:54/ 0 赞/ 332 阅读

相关改变radio默认样式

.html <div class="choose"> <p class="option"><label class="radio"><span cla

小鱼儿/ 2021年09月13日 15:58/ 0 赞/ 446 阅读

相关 vue动态样式绑定改变伪元素等特殊样式(css var函数)

改变样式是我们实际开发中最常做的事情。诸如在css中，我们添加鼠标滑入滑出效果添加不同的样式。诸如在js中，我们根据某个条件，或者触发某个方法，去动态改变某个样式。

淡淡的烟草味﹌/ 2021年08月13日 12:09/ 0 赞/ 645 阅读