关闭

offsetWidth的缺点

105人阅读 评论(0) 收藏 举报
分类:
<!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>
0
0

猜你在找
【套餐】Hadoop生态系统零基础入门
【套餐】嵌入式Linux C编程基础
【套餐】2017软考系统集成项目——任铄
【套餐】Android 5.x顶级视频课程——李宁
【套餐】深度学习入门视频课程——唐宇迪
【直播】广义线性模型及其应用——李科
【直播】从0到1 区块链的概念到实践
【直播】计算机视觉原理及实战——屈教授
【直播】机器学习之凸优化——马博士
【直播】机器学习&数据挖掘7周实训--韦玮
查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9502次
    • 积分:818
    • 等级:
    • 排名:千里之外
    • 原创:73篇
    • 转载:0篇
    • 译文:3篇
    • 评论:1条
    文章分类
    最新评论