最近在学习DOM盒子模型,各种属性看着眼花缭乱,下面根据三个系列来分别介绍一下:

client系列

  1. clientWidth :width+(padding-left)+(padding-right)—>和内容溢出无关系
  2. clientHeight:height+(padding-top)+(padding-bottom)—>和内容溢出无关系
  3. clientLeft:左边框的宽度
  4. clientTop:上边框的高度(border[Left/Top]Width)

offset系列

  1. offsetParent:当前元素的父级参照(父级参照物),在同一个平面中,最外层的元素是里面所有元素的父级参照物(和html层级结构没有必然联系)
    a)一般来说一个页面中所有元素的父级参照物都是body
    b)body的父级参照物->document.body.offsetParent->null
    c)可以通过position:absolute/realative/fixed改变父级参照物
    我们可以总结一下规律:

position为fixed元素是没有offsetParent,但firefox统一返回body。
position为absolute, relative的元素的offsetParent总是为其最近的已定位
的元素,没有找最近的td,th元素,再没有找body。
position为static的元素的offsetParent则是先找最近的td,th元素,再没有找body。
body为最顶层的offsetParent。

  1. offsetWidth/offsetHeight:clientWidth/ clientHeight+左右/上下边框 —>和内容溢出无关系
  2. offseTop/offsetLeft:当前元素的外边框距离父级参照物内边框的偏移量

scroll系列

  1. scrollWidth/scrollHeight:和clientWidth/clientHeight一样(前提是:内容无溢出)

若容器内容有溢出:获取结果是如下规则:
scrollWidth:真实内容的宽度(包含溢出)+左填充
scrollHeight:真实内容的高度(包含溢出)+上填充。

  1. scrollLeft/scrollTop(可读写 ):滚动条卷曲的宽度和高度

scrollTop有两个临界值,最大值和最小值
滚动最小值:0,dom.scrollTop=一个小于0的数,滚动条也是滚动到顶部
滚动最大值:scrollHeight-clientHeight ,dom.scrollTop=一个大于(scrollHeight-clientHeight)的数,滚动条也是在最底部

通过以上我画了一张图,对照图看顿时你会觉得恍然大悟!请看下图:

javascript基础学习系列-DOM盒子模型常用属性的更多相关文章

  1. DOM盒子模型常用属性client,offset和scroll

    JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offs ...

  2. javascript基础学习--HTML DOM

    写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

  3. JavaScript基础学习(九)—DOM

    一.DOM概述      DOM(Document Object Model)文本对象模型.      D: 文档,HTML文档或XML文档.      O: 对象,document对象的属性和方法. ...

  4. javascript基础学习系列-1

    JavaScript简介 JavaScript的用途 JavaScript用来制作web页面交互效果,提升用户体验. web前端三层来说:w3c的规范:行内样式(淘汰) 结构层 HTML 从语义的角度 ...

  5. CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子

    怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...

  6. javascript基础学习系列-原型链模式

    1.demo代码如下: 2.画图如下: 3.规则: 1)每一个函数数据类型(普通函数/类)都有一个天生自带的属性:prototype(原型),并且这个属性是一个对象数据类型的值 2)并且prototy ...

  7. 学习javascript基础知识系列第二节 - this用法

    通过一段代码学习javascript基础知识系列 第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...

  8. 学习javascript基础知识系列第三节 - ()()用法

    总目录:通过一段代码学习javascript基础知识系列 注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...

  9. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

随机推荐

  1. 关于VC预定义常量_WIN32,WIN32,_WIN64(转)

    VC2012 下写 Windows 程序时,有时需要判断编译环境.在之前的文章<判断程序是否运行在 Windows x64 系统下.>里说过如何在运行期间判断系统环境,但在编译时如何判断? ...

  2. yolov3源码darknet在vscode下调试

    1. 安装配置: https://pjreddie.com/darknet/yolo/ darknet文件夹下make命令搞定: 2. 配置vscode 打开安装好的vscode并安装扩展C/C++( ...

  3. spring mvc 异常统一处理

    摘自: http://gaojiewyh.iteye.com/blog/1297746  

  4. [Functional Programming] From simple implementation to Currying to Partial Application

    Let's say we want to write a most simple implementation 'avg' function: const avg = list => { let ...

  5. python emoji 表情过滤

    http://my.oschina.net/jiemachina/blog/189460 注意替换的这些emoji是标准的表情字符,每个表情本来是2个字节,替换成字符串后,每个表情就变成12个字符了, ...

  6. Oracle 12c 添加scott用户

    对于熟悉Oracle或者接触过Oracle的人,scott这个用户大家一定相当的熟悉.12c推出了可插拔数据库,在一个容器cdb中以多租户的形式同时存在多个数据库pdb.pdb中默认不包含scott用 ...

  7. 11G新特性 -- RMAN Multisection Backups

    Oracle 11g支持以sections的方式来备份和还原数据文件.在section级别进行备份,被称作multisection backup(多段备份).section是一个数据文件中连续的块.m ...

  8. javascript es6 箭头函数

    1.箭头函数示例 let add = (a,b) => a + b         //没有语句块时,默认作为返回值 add(1,2); var multi = (a,b) => {ret ...

  9. Latex学习(一)

    要在整个系统中使用TEX Live的字体(假定你有足够的权限),请依照下面的步骤来做: 1.将texlive-fontconfig.conf文件复制到/etc/fonts/conf.d/09-texl ...

  10. Fluent动网格【6】:部件变形案例

    本案例描述使用动网格过程中处理边界变形的问题. 案例描述 本案例几何为一个抛物线旋转成型的几何体.如图所示. 其中上壁面刚体运动引起抛物面变形.刚体运动方程为: \[ v=\left\{ \begin ...