码迷,mamicode.com
首页 > Web开发 > 详细

关于js盒子模型的知识梳理

时间:2017-09-28 14:08:24      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:etl   监测   宽度   xxx   四舍五入   setw   word   idt   line   

盒子模型

JS盒子模型中的13个常用属性:

  • clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成
  • clientTop/clientLeft:上边框和左边框的宽度
  • offsetWidth/offsetHeight:clientWidth/clientHeight+border
  • offsetParent:父级参照物,和父级元素没有必然关系,默认元素的父级参照物都是BODY,如果设置定位后,可以改变默认的父级参照物
  • offsetLeft/offsetTop:当前元素的外边框距离父级参照物内边框的偏移(左/上) =>IE8下是当前元素的外边框距离父级参照物的外边框算作偏移
  • scrollWidth/scrollHeight:当前元素真实内容的宽度和高度,在没有内容溢出的情况下,和clientWidth/clientHeight的值一模一样;但是在内容有溢出的情况下,scrollHeight获取的值是上padding+真实内容的高度(由于浏览器对于字体等渲染不太一样,所以我们获取的结果都是约等于的值,并且是否这是overflow:hidden也会对结果产生影响)
  • scrollTop/scrollLeft:当前区域如果有内容溢出,并且我们也让其出现了滚动条,那么这两属性获取的即使滚动条卷去的宽度和高度
    • 1、scrollTop/scrollLeft是13个属性中唯一可以进行读写的,其余的都是只读的
    • 2、通过JS盒子模型的属性获取到的结果都是整数(它默认会对小数值进行四舍五入,而且获取的值是不带单位的)
    • 3、如果操作的是整个页面(不管是获取还是设置),想要兼容的话,需要写两套: document.documentElement.xxx=xxx; document.body.xxx=xxx;
    • 4、JS中的盒子模型,获取的样式值都是复合值,如果想获取单独某一个具体的样式值(例如:我就想获取width或者paddingLeft)使用这13个属性就不行了

获取当前元素的具体样式属性值

  技术分享

JS中浏览器兼容检测的三大方式

  • 使用TRY、CATCH
  技术分享
  • 当前浏览器信息监测来判断是否兼容
  技术分享
  • 验证当前即将使用的属性和方法是否在当前对象中
  技术分享

 

关于js盒子模型的知识梳理

标签:etl   监测   宽度   xxx   四舍五入   setw   word   idt   line   

原文地址:http://www.cnblogs.com/Scar007/p/7606272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!