                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS动画效果

为什么写了这句之后，在我的浏览器里就不运动了oDiv1.style.width=parseInt(oDiv1.style.width)-1+'px';

<html>

<head>

<title>任意属性值</title>

#div1{

width:200px;

height:200px;

background:red;

border:4px solid #000;

}

</style>

window.onload=function(){

startMove();

}

function startMove(){

setInterval(function(){

var oDiv1=document.getElementById('div1');

//oDiv1.style.width=oDiv1.offsetWidth-5+'px';

oDiv1.style.width=parseInt(oDiv1.style.width)-1+'px';

},30)

}

</script>

</head>

<body>

</body>

</html>

慕粉2130563850

2016-12-08

源自：JS动画效果 4-2

关注问题我要回答

1118

操作

收起

3 回答

番小由回答被采纳 +3 积分
2016-12-08

获取元素宽的时候不能直接用style.width去获取；要用offsetWidth；

oDiv1.style.width=parseInt(oDiv1.style.width)-1+'px';

你把这句改成oDiv1.style.width=parseInt(oDiv1.offsetWidth)-1+'px'; 就会动了。

1 回复有任何疑惑可以回复我~

收起回答

慕粉2130563850 提问者

非常感谢，我明白了

2016-12-09 回复有任何疑惑可以回复我~

QuincyHan
2016-12-10

虽然已经有人指出前面两个答案中的错误，我觉得还是说的更详细一点，免得有人被误导。ob.style.attr的写法是没有任何错误的，这种写法放在赋值号"="的左边时是为这个属性赋值，放在右边是获取这个属性的值，但是这种方式只能获取行内样式，也就是写在标签中的样式。题主的问题应该是模仿了老师的js代码但是没有给div添加行内样式style="width:200px"，所以无法获取指定属性，js语句不执行。另外获取非行内样式的css属性值的方法，如上面的同学说的，obj.currentStyle[attr]//兼容IE getComputedStyle(obj.false)[attr]//兼容其他主流浏览器，其中的false是没有伪类，目前阶段不用关注这个，如感兴趣可自行搜索

3 回复有任何疑惑可以回复我~

收起回答

coding_Boy
2016-12-08

就没有这种写法，这句代码本身就是错误的，建议你好好吧js基础部分好好学一学再来。以下内容仅供参考：

标签元素的宽高值获取
//绝对宽度
Obj.offsetWidth
//绝对高度
Obj.offsetHeight

以下是获取窗口对象的宽高值。
clientHeight   获取对象的高度，不计算任何边距、边框、滚动条，但包括该对象的补白。
clientLeft   获取   offsetLeft   属性和客户区域的实际左边之间的距离。
clientTop   获取   offsetTop   属性和客户区域的实际顶端之间的距离。
clientWidth   获取对象的宽度，不计算任何边距、边框、滚动条，但包括该对象的补白。
clientX   设置或获取鼠标指针位置相对于窗口客户区域的   x   坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY   设置或获取鼠标指针位置相对于窗口客户区域的   y   坐标，其中客户区域不包括窗口自身的控件和滚动条。
clip   设置或获取定位对象的哪个部分可见。
clipBottom   获取对象剪裁区域的底边坐标。
clipLeft   获取对象剪裁区域的左边坐标。
clipRight   获取对象剪裁区域的右边坐标。
clipTop   获取对象剪裁区域的顶边坐标。