盒子模型

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盒子模型的知识梳理的更多相关文章

  1. js盒子模型

    1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...

  2. Vue.js 2.x API 知识梳理（一） 全局配置

    Vue.js 2.x API 知识梳理(一) 全局配置 Vue.config是一个对象,包含Vue的全局配置.可以在启动应用之前修改指定属性. 这里不是指的@vue/cli的vue.config.js ...

  3. js 盒子模型与盒子偏移量

    js 盒子模型: 通过js中提供的一系列属性和方法获取页面中元素的样式信息值. 一.client系类—>只读属性不可设置 (当前元素的私有属性,和内容溢出没关系,如果给容器设置了高度,就采用设置 ...

  4. HTML盒子模型冷知识！！！

    一.边框    1.边框颜色     border-color 边框颜色(可以设置上边框,如:border-top-color,也可以整体设置,但是要注意顺序)     2.边框粗细     bord ...

  5. JS“盒子模型”

    列举几个常用的属性 client系列 clientWidth - 盒子真实内容的宽度[content+padding左右],不包括边线和滚动条 clientHeight - 盒子真实内容的高度[con ...

  6. JS学习：第二周——NO.3盒子模型

    1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值   JS提供的属性和方法: clien ...

  7. js中的盒子模型

    说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin ...

  8. 前端（十六）—— JavaScript盒子模型、JS动画、DOM、BOM

    JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...

  9. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

随机推荐

  1. 从零使用qemu模拟器搭建arm执行环境

    为什么会有这篇文章 早在2011年的时候,跟当时同事一起讨论,做Linux系统开发正处于整个Linux开发中间层,没有上层的C/C++业务和数据库的开发经验.也没有底层的内核和驱动开发经验,究竟路该怎 ...

  2. MyReport.Form表单引擎

    MyReport.Form表单引擎.主要提供表单模板的设计以及表单模板的预览填报等功能集合. 支持文本框.选择框.数字框.日期框.图片框.组合框.弹出框等经常使用控件. watermark/2/tex ...

  3. Android自定义组件系列【13】——Android自定义对话框如此简单

    在我们的日常项目中很多地方会用到对话框,但是Android系统为我们提供的对话框样子和我们精心设计的界面很不协调,在这种情况下我们想很自由的定义对话框,或者有的时候我们的对话框是一个图片,没有标题和按 ...

  4. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

  5. Atcoder ABC 071 C,D

    C - Make a Rectangle Time limit : 2sec / Memory limit : 256MB Score : 300 points Problem Statement W ...

  6. Kali的源得数字验证问题

    装上之后第一件事就是执行apt-get update && apt-get upgrade,结果却出现了这样的错误 我添加的是中科大的更新源,在浏览器中是可以正常打开的: deb ht ...

  7. postgresql 不同数据库不同模式下的数据迁移

    编写不容易,转载请注明出处谢谢, 数据迁移 因为之前爬虫的时候,一部分数据并没有上传到服务器,在本地.本来用的就是postgresql,也没用多久,数据迁移的时候,也遇到了很多问题,第一次使pg_du ...

  8. 【Uva 10163】Storage Keepers

    [Link]: [Description] 你有n(n≤100)个相同的仓库.有m(m≤30)个人应聘守卫,第i个应聘者的能力值 为Pi(1≤Pi≤1000).每个仓库只能有一个守卫,但一个守卫可以看 ...

  9. 数据结构基础（3）---C语言实现单链表

    #include<stdio.h> #include<malloc.h> #include<stdbool.h> /** **链表节点的定义 */ typedef ...

  10. android-Preference 风格调整

    <CheckBoxPreference android:defaultValue="false" android:layout="?android:attr/pre ...