关于js盒子模型的知识梳理
盒子模型
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盒子模型的知识梳理的更多相关文章
- js盒子模型
1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...
- Vue.js 2.x API 知识梳理(一) 全局配置
Vue.js 2.x API 知识梳理(一) 全局配置 Vue.config是一个对象,包含Vue的全局配置.可以在启动应用之前修改指定属性. 这里不是指的@vue/cli的vue.config.js ...
- js 盒子模型与盒子偏移量
js 盒子模型: 通过js中提供的一系列属性和方法获取页面中元素的样式信息值. 一.client系类—>只读属性不可设置 (当前元素的私有属性,和内容溢出没关系,如果给容器设置了高度,就采用设置 ...
- HTML盒子模型冷知识!!!
一.边框 1.边框颜色 border-color 边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序) 2.边框粗细 bord ...
- JS“盒子模型”
列举几个常用的属性 client系列 clientWidth - 盒子真实内容的宽度[content+padding左右],不包括边线和滚动条 clientHeight - 盒子真实内容的高度[con ...
- JS学习:第二周——NO.3盒子模型
1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值 JS提供的属性和方法: clien ...
- js中的盒子模型
说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
随机推荐
- 【Henu ACM Round#16 C】Graph and String
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 根据题意:先明确以下规则: 1.如果两个点之间没有边,那么这两个点只能是a或c,且不能相同 2.如果两个点之间有边,那么他们之间的差 ...
- 【Henu ACM Round #13 C】 Ebony and Ivory
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 先求出c-bx的所有可能 ->存在map里面 然后枚举y看看ay在不在map里面 在的话就有解. 这样复杂度是\(O(N*lo ...
- Html学习总结(1)——理解Html的head
HTML文档的head部分,通常包括指定页面标题,为搜索引擎提供关于页面本身的信息,加载样式表,以及加载JavaScript文件(出于性能考虑,多数时候放在页面底部</body>标签结束前 ...
- J2EE之13个规范标准概念
主要是关于j2EE十三个规范的总结. java基础知识 首先java分为三类:J2ME.J2SE.J2EE. 依据开发软件的大小和量级他们的作用分别不同,J2ME是开发为机顶盒.移动电话和PDA之类嵌 ...
- 空间矢量数据(.shp文件)之JAVA操作
Shape文件由ESRI开发.一个ESRI(Environmental Systems Research Institute)的shape文件包含一个主文件,一个索引文件,和一个dBASE表. 当中主 ...
- 数据库优化技巧之in和not in
在编写SQL语句时,假设要实现一张表有而另外一张表没有的数据时. 通常第一直觉的写法是: select * from table1 where table1.id not in(select id f ...
- Fragment-管理Fragment2
上一篇,给大家讲了有关Fragment管理的几个函数,即add,replace,remove,这节再讲讲其它函数,然后再给大家看一个系统BUG. 一.hide().show() 1.基本使用 这两个函 ...
- private SortedDictionary<string, object> Dic_values = new SortedDictionary<string, object>();
private SortedDictionary<string, object> Dic_values = new SortedDictionary<string, object&g ...
- LBP 特征
LBP(Local Binary Pattern,局部二值模式)是一种用来描述图像局部纹理特征的算子:它具有旋转不变性和灰度不变性等显著的优点.用于纹理特征提取.而且,提取的特征是图像的局部的纹理特征 ...
- JSP_Learn
// 解决中文乱码的问题String name = new String((request.getParameter("name")).getBytes("ISO-885 ...