offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
来源:互联网 发布:excel找相同数据 编辑:程序博客网 时间:2024/06/05 14:08
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式</title><script type="text/javascript" src="jquery.min.js"></script></head><body style="border:1px solid #ccc"> <div id="div" style="width:100px;height:80px;left:10px;top:8px;position:relative;border:1px solid #ccc;margin:20px 10px;padding:7px 6px;"> </div> <script type="text/javascript"> var divObj = document.getElementById("div"); var dOffsetWidth = divObj.offsetWidth;//返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距) var $dOffsetWidth = $(divObj).outerWidth(false);//参数为true,包括外边距 var dOffsetHeight = divObj.offsetHeight;//返回元素的高度(包括元素高度、内边距和边框,不包括外边距) var $dOffsetHeight = $(divObj).outerHeight(false);//参数为true,包括外边距 var dClientWidth = divObj.clientWidth;//返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距) var $dClientWidth = $(divObj).innerWidth(); var dClientHeight = divObj.clientHeight;//返回元素的高度(包括元素高度、内边距,不包括边框和外边距) var $dClientHeight = $(divObj).innerHeight(); var dWidth = divObj.style.width;//返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距) var $dWidth = $(divObj).width();//width(val)设置宽 var dHeight = divObj.style.height;//返回元素的高度(包括元素高度,不包括内边距、边框和外边距) var $dHeight = $(divObj).height();//height(val)设置高 var dscrollWidth = divObj.scrollWidth;//返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同 var dscrollHeight = divObj.scrollHeight;//返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同 console.log("dOffsetWidth:"+dOffsetWidth+",dOffsetHeight:"+dOffsetHeight+",dClientWidth:"+dClientWidth+",dClientHeight:"+dClientHeight+",dWidth:"+dWidth+",dHeight:"+dHeight+",dscrollWidth:"+dscrollWidth+",dscrollHeight:"+dscrollHeight); console.log("$dOffsetWidth:"+$dOffsetWidth+",$dOffsetHeight:"+$dOffsetHeight+",$dClientWidth:"+$dClientWidth+",$dClientHeight:"+$dClientHeight+",$dWidth:"+$dWidth+",$dHeight:"+$dHeight); /* 注意:offsetWidth(offsetHeight)与style.width(style.height)的区别 1. style.height 返回的是字符串,如28px,offsetWidth返回的是数值28,如果需要对取得的值进行计算,用offsetWidth比较方便;如果拿到offsetWidth设置style.left的值,需加'px'。 2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性,clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性 3. style.height的值需要事先定义,否则取到的值为空。而且必须要定义在html里,如果定义在css里,style.height的值仍然为空,但元素偏移有效;而offsetWidth则仍能取到。 */ /* 总结: 1、通过style.width(style.height)或者jQuery的$(divObj).width()/$(divObj).height()获取/设置元素的宽高 2、若要获取元素包含边框的宽度,则可通过divObj.offsetWidth/divObj.offsetHeight或jQuery的$(divObj).outerWidth(false)/$(divObj).outerHeight(false)获取 3、通过$(divObj).outerWidth(true)/$(divObj).outerHeight(true)获取带外边距的宽度 4、通过$(divObj).innerWidth()/$(divObj).innerHeight()获取不包含边框、不包含外边距的宽度 */ </script></body></html>
1 0
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- scrollWidth,clientWidth与offsetWidth的区别
- scrollWidth、clientWidth与offsetWidth的区别
- 各种width,offsetWidth, getBoundingClientRect(), clientWidth,scrollWidth区别
- scrollWidth,clientWidth,offsetWidth的区别
- scrollWidth,clientWidth,offsetWidth的区别
- scrollWidth,clientWidth,offsetWidth的区别
- scrollWidth,clientWidth,offsetWidth的区别
- scrollWidth,clientWidth,offsetWidth的区别
- clientWidth,scrollWidth,offsetWidth的区别
- offsetwidth,clientwidth,scrollWidth的区别
- scrollWidth,clientWidth,offsetWidth的区别
- scrollWidth,clientWidth,offsetWidth的区别
- scrollWidth、clientWidth、offsetWidth的区别;
- width、clientWidth、offsetWidth、scrollWidth、availWidth
- scrollWidth,clientWidth,offsetWidth 区别
- Java中的平方
- App和后台通信基于session_id的登录验证
- uva10034 Freckles
- 求两个升序数组的交集,并集,补集
- svn 问题汇总
- offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式
- 软件测试报告
- Windows Embedded 7 最简便EWF系统制作方案
- Docker源码分析(七):Docker Container网络 (上)
- 详解单例模式
- dOffsetLeft、dClientLeft、left区别
- JS获取字符串长度,1个中文=2个英文
- 做一个合格的程序猿之浅析Spring IoC源码(七)浅谈BeanFactory和FactoryBean
- ftp vsftpd 530 login incorrect 解决办法汇总