offset的bug

来源：互联网发布：淘宝客优惠券口令推广编辑：程序博客网时间：2024/06/02 01:13

案:1：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#div1 {height: 200px; width: 200px;background: red;border: 1px  solid black;}</style><script>setInterval(function(){var oDiv = document.getElementById("div1");oDiv.style.width = oDiv.offsetWidth - 1 + 'px';},30);</script></head><body><div id = "div1"></div></body></html>

题意是让div的宽度逐渐减小，可结果是不断加大，原因是加了border ，用offsetWidth取宽度时将border也算入其中，故会加大。

改进:

案例2：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#div1 {height: 200px; width: 200px;background: red;border: 1px  solid black;}</style><script>setInterval(function(){var oDiv = document.getElementById("div1");oDiv.style.width = parseInt(oDiv.style.width) - 1 + 'px';},30);</script></head><body><div id = "div1" style="width: 200px;"></div></body></html>

注意！style只能取行间样式

另一种改进方法：

案例3：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>#div1 {height: 200px; width: 200px;background: red;border: 1px  solid black;}</style><script>function getStyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];}}setInterval(function(){var oDiv = document.getElementById("div1");oDiv.style.width = parseInt(getStyle(oDiv,'width')) - 1 + 'px';},30);</script></head><body><div id = "div1"></div></body></html>

阅读全文

0 0