关于样式获取
2017-02-18 本文已影响0人
会有猫惹
目的:让一个红色方块宽度不断减小。
- HTML代码:
<div id="point"></div>
- CSS代码:
#point{ width: 200px; height: 200px; background-color: red; border: 1px solid #000; }
- JS代码:
window.onload = function(){ startMove(); } function startMove(){ var oDiv = document.getElementById('point'); oDiv.style.width = parseInt(oDiv.getStyle(oDiv,'width') )- 1 + 'px'; } function getStyle(obj,attr){ if(obj.currentStyle){ //针对IE浏览器 return obj.currentStyle[attr]; } else{ //针对火狐浏览器 return getComputedStyle(obj,false)[attr]; }
注意不能写成
oDiv.style.width = parseInt(oDiv.offsetWidth) - 1 + 'px';
因为此时的offsetWidth包括了border,而width不包括,所以会增大。