JavaScript中很多属性的功能比较类似,当然它们之间是有区别的,否则就是设计错误了。
如果是有经验的程序员,从两者名称大体可以猜测到区别,当然这需要一个积累过程。
下面详细介绍一下标题中两属性的区别,期望能够达到举一反三的效果。
offsetwidth与style.width都可以返回表示元素"宽度"的数据。
非常相似,但是区别也是十分明显,下面通过代码实例做一下介绍。
关于两个属性的基本用法参阅如下两篇文章:
一.宽度所涵盖内容的区别:
虽然两者都可以返回表示元素宽度的一个值,但是所涵盖的内容并不相同。
代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>offsetwidth style.width</title>
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  odiv.innerHTML=str;
} 
</script> 
</head> 
<body> 
<div id="ant" style="width:200px;
                     height:50px; 
                     border:5px solid red; 
                     background-color:green; 
                     padding:3px"></div> 
</body> 
</html>
代码分析如下:
(1).offsetwidth属性返回值涵盖元素的width+border+padding。
(2).style.width属性返回值仅包含元素的width属性值。
(3).offsetwidth属性返回值是数字,不带单位,style.width返回值带有单位。
二.两个属性的可读写性:
下面不再使用代码演示,直接给出结论。
(1).style.width属性是可读写的。
(2).offsetwidth只读属性,不能赋值,这样很好理解,因为offsetwidth返回值由多种成分构成,无法确定赋值如何在各种成分的划分,这个值给border呢,还是给padding,或者给width。
三.是否能获取隐藏元素的尺寸:
两者在对待隐藏元素是有区别的,代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>offsetwidth与style.width区别</title>
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  alert(str);
} 
</script> 
</head> 
<body> 
<div id="ant" style="width:200px;
                     height:50px; 
                     border:5px solid red; 
                     background-color:green; 
                     padding:3px;
                     display:none"></div> 
</body> 
</html>
将div设置为display:none,这时offsetWidth实训个返回值为0,style.width可以正常返回。
四.style.width返回宽度有条件限制:
并不是所有css的width的属性值都可以被style.width属性返回。
代码实例如下:
   [ 其他 ] 运行代码    下载代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.51qianduan.com/" /> 
<title>offsetwidth与style.width区别</title>
<style type="text/css"> 
#ant{ 
  width:200px; 
  height:50px; 
  border:5px solid red; 
  background-color:green; 
  padding:3px; 
} 
</style> 
<script> 
window.onload=function(){ 
  let odiv=document.getElementById("ant");
  let str="";
  str=str+"offsetWidth:"+odiv.offsetWidth+"<br/>";
  str=str+"style.width:"+odiv.style.width;
  odiv.innerHTML=str;
} 
</script> 
</head> 
<body> 
<div id="ant" style=""></div> 
</body> 
</html>
可以看到offsetwidth可以正常返回值,但是style.width没有返回。
但是的的确确使用css设置了元素的width属性值,分析如下:
(1).不要认为style.width属性可以获取任何形式设置的width属性值。
(2).它只能获取通过元素style属性设置width属性值,或者通过style.width设置值的值。
其实从名称也能够猜测出原因,既然是style.xx,那么肯定与style方式设置的CSS属性相关联。
特别说明:不要误以为是与<style></style>内部样式表相关联,而是与style属性方式相关联。

代码描述:offsetwidth style.width。offsetwidth与style.width区别



180 240



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 基础js js语法 js数组 js注释 js变量 js条件语句 js循环 js数据类型 js字符串 js运算符 js类型转换 js作用域 js正则表达式 js事件 js错误处理 js对象 js调试 js严格模式 js浏览器对象 html对象 js效果 js表单按钮 js跳转 js日期时间 js宽度高度 js链接地址url js单选复选 js下拉导航菜单 js文本框input js验证 js操作XML js表格table jsIFRAME js操作内容值 js操作属性 js操作元素 js操作class类 js操作DIV标签 jsAJAX jsJSON jsSESSION jsCOOKIE js动画canvas js旋转翻转 js放大缩小 js隐藏显示 js淡入淡出 js滑动滚动拖动 js选项卡切换tab js登录注册 js密码验证码 js导航菜单 js尺寸自适应 js提示框弹窗 js进度条加载 js引入加载cssjs js游戏 js函数方法 js/javacript

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到