div有border时不能用offsetWidth获取div宽度
2017-05-10 14:39
302 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>动画</title> <style> body{ margin:0; padding:0; } ul,li{ list-style:none; } ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; border:4px solid #000; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
<script type="text/javascript"> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); } aLi[i].onmouseout=function(){ startMove(this,200); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(iTarget-parseInt(getStyle(obj,'width')))/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(parseInt(getStyle(obj,'width'))==iTarget){ clearInterval(obj.timer); }else{ //alert(getStyle(obj,'width')); obj.style.width=parseInt(getStyle(obj,'width'))+speed+"px"; } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; //IE }else{ return getComputedStyle(obj,false)[attr]; //火狐 } } </script>
相关文章推荐
- JavaScript基础 获取整个div的宽度 不含滚动条的宽度 向下滚动了多少px offsetWidth scrollWidth scrollTop
- JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)
- JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)
- JavaScript基础 获取整个div的宽度 不含滚动条的宽度 向下滚动了多少px offsetWidth scrollWidth scrollTop
- js不能获取隐藏的div的宽度只能先显示后获取
- js获取Html元素的实际宽度高度(offsetWidth)
- js不能获取隐藏的div的宽度只能先显示后获取
- div的宽度width不包括border和padding、margin!!!!!
- js不能获取隐藏的div 的宽度,目前只能先显示后获取
- 用 jQuery 取得 Div 的宽度与高度(Width, Padding, Border, Margin)
- JS获取屏幕、浏览器、网页高度,宽度信息 定位div
- JS属性 ClientTop,scrollTop,offsetWidth,ClientWidth,clientLeft,padding,border,top,margin区别
- div高度、宽度100%|div width、height 100% - div100%
- 给div设置宽度,规定不能超过某宽度,小于此宽度则自适应
- 获取某个div或td的宽度
- div显示的width和height与padding、margin、border的关系
- jquery 获取 DIV的width
- 有关获取屏幕坐标的clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth
- javascript获取设置div的高度和宽度
- js 获取width为auto时的实际宽度