offsetWidth的缺点

原创 2017年01月03日 23:09:51
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;}
div{
width:100px;
height:100px;
background-color:yellowgreen;
border:2px solid red;
/*padding:5px;*/
float: left;
margin:10px;
/*position: absolute;*/
/*left:20px;
top:30px;*/
}
#div3{
/*IE9-11、火狐和谷歌用opacity*/
opacity: 0.5;  
/*IE用6-8的是filter*/
filter: alpha(opacity:50);
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var oDiv3=document.getElementById('div3');
var oDiv4=document.getElementById('div4');
var oDiv5=document.getElementById('div5');
var oTxt1=document.getElementById('txt1');
//offsetWidth和offsetHeight,获取的都是对象的盒模型(宽、border、padding)
//offsetWidth=width+border+padding 
//offsetHeight=height+border+padding
//所以我们如果用obj.style.width,但是它只能获取行间的样式,不能获取非行间样式(即样式表里的样式)
//getStyle完全不考虑border、padding的大小
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];   // IE用
}else{
return getComputedStyle(obj,false)[name];   // 火狐和谷歌用
}
}
oDiv1.onmouseover=function(){
startMove(oDiv1,'height',200);
}
oDiv1.onmouseout=function(){
startMove(oDiv1,'height',100);
}
oDiv2.onmouseover=function(){
startMove(oDiv2,'width',200);
}
oDiv2.onmouseout=function(){
startMove(oDiv2,'width',100);
}
oDiv3.onmouseover=function(){
startMove(oDiv3,'opacity',100);
}
oDiv3.onmouseout=function(){
startMove(oDiv3,'opacity',50);
}
oDiv4.onmouseover=function(){
startMove(oDiv4,'fontSize',40);
}
oDiv4.onmouseout=function(){
startMove(oDiv4,'fontSize',18);
}
oDiv5.onmouseover=function(){
startMove(oDiv5,'borderWidth',20);
}
oDiv5.onmouseout=function(){
startMove(oDiv5,'borderWidth',1);
}
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
var speed=0;
if(attr=='opacity'){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
oTxt1.value=cur;
}else{
cur=parseInt(getStyle(obj,attr));
}
speed=(iTarget-cur)/6;  
speed>0?speed=Math.ceil(speed):speed=Math.floor(speed);
if(cur==iTarget){
clearInterval(obj.timer);
}else{
if(attr=='opacity'){
obj.style[attr]=(cur+speed)/100;
obj.style.filter='alpha:(opacity:'+(cur+speed)/100+')' ;
}else{
obj.style[attr]=(cur+speed)+'px';
}
}
},30);
}
}
</script>
</head>
<body>
<input type="text" name="txt1" " id="txt1" value="" />
<div id="div1">
变高
</div>
<div id="div2">
变宽
</div>
<div id="div3">
透明度
</div>
<div id="div4">
字体大小
</div>
<div id="div5">
边框
</div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

scrollwidth和offsetwidth区别

  • 2010年02月08日 10:27
  • 40KB
  • 下载

HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解(转载)

作者: 来源: http://bbs.chinaunix.net核心提示:HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth 到底指的哪到哪的距离之...
  • hgyu
  • hgyu
  • 2011年08月18日 20:22
  • 167

offsetWidth与style.width的区别

  • 2016年09月11日 10:34
  • 1KB
  • 下载

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth,offsetLeft等属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获...

js的offsetHeight offsetWidth

scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容...
  • daditao
  • daditao
  • 2013年03月09日 09:22
  • 446

element.offsetWidth 与 element.style.width的区别

请先 下载demo事例 下载后,请依次点击div,仔细观看弹出框里面的内容,仔细比较一下,你就能看到区别。 不愿意下载的童鞋也可以自己复制啊! html: Hel...

offsetHeight、offsetWidth、clientWidth、clientHeight无法获取值得问题

获取offsetWidth,和clientWidth的值时弹窗为0,在CSDN上询问了一下才明白了原因:在HTML的声明下,屏幕宽高是隐藏的,如果想要获得值,就需要在css中定义一下HTML和body...

JS:offsetWidth\offsetleft 等图文解释

JS:offsetWidth\offsetleft 等图文解释   转载自:点击打开链接 等图文解释" title="JS:offsetWidth\offsetleft 等图文解释"...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:offsetWidth的缺点
举报原因:
原因补充:

(最多只允许输入30个字)