列举几个常用的属性

client系列

clientWidth - 盒子真实内容的宽度[content+padding左右],不包括边线和滚动条

clientHeight - 盒子真实内容的高度[content+padding上下],不包括边线和滚动条

clientTop - 盒子上边框的宽度[border-top]

clientLeft - 盒子左边框的宽度[border-left]

offset系列:获取整个盒子的宽高

offsetWidth - 整个盒子的宽度[content+padding+border]

offsetHeight - 整个盒子的高度[content+padding+border]

offsetParent - 父级参照物:一个元素的父级参照物,就看它的父级是否有发生定位,如果有,那么它的父级就是当前元素的父级参照物,

如果没有,那么它的父级参照物就是body

offsetTop - 当前元素的外边框距离父级参照物内边距的上偏移量

offsetLeft - 当前元素的外边框距离父级参照物内边距的左偏移量

scroll系列

scrollWidth - 盒子真实内容【包括溢出和未溢出】的宽度,没有溢出的情况下 scrollWidth=clientWidth,有溢出盒子的scrollWidth+溢出宽度

scrollHeight - 盒子真实内容【包括溢出和未溢出】的高度,没有溢出的情况下 scrollHeight=clientHeight,有溢出盒子的scrollHeight+溢出高度

scrollTop - 盒子向上卷出去的距离

scrollLeft - 盒子向右卷出去的距离

封装一个获取当前元素距离body的距离的方法

function offset (ele){
let l = ele.offsetLeft;
let t = ele.offsetTop;
let parent = ele.offsetParent;
while(parent.tagName !== 'BODY'){
l+= parent.clientLeft + parent.offsetLeft;
t+= parent.clientTop + parent.offsetTop;
// 需要不断的跟新父级参照物
parent = parent.offsetParent
}
return {left:l,top:t}
}
												

JS“盒子模型”的更多相关文章

  1. js盒子模型

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

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

    盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...

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

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

  4. JS学习:第二周——NO.3盒子模型

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

  5. js中的盒子模型

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

  6. 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM

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

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

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

  8. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  9. JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型

    jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...

随机推荐

  1. 好程序员分享该如何选择background-image和img标签

    好程序员分享该如何选择background-image和img标签,用img标签 如果你希望别人打印页面时候包含这张图片请使用img标签 当这张图片有非常有意义的语义,比如警告图标,请使用img标签及 ...

  2. input type类型和input表单属性

    一.input type类型 1.Input 类型 - email 在提交表单时,会自动验证 email 域的值. E-mail: <input type="email" n ...

  3. 序言 - PHP零基础快速入门

    我为什么要写<PHP零基础快速入门>? 原因: PHP 真心简单,适合零基础的人快速入门掌握,身边的人学习一两周上手开发的比比皆是: 市面上的文章或书籍对初学者并不友好,多半枯燥乏味,我相 ...

  4. vue 中 assets 和 static 的区别

    Vue中的静态资源管理(src下的assets和static文件夹的区别)

  5. To B Vs To C

    谈谈 To B 业务的难点https://tangjie.me/blog/259.html

  6. Jmeter单个长连接发送多个Sample

    Mark自:https://blog.csdn.net/lykangjia/article/details/16337505 1. 线程组,在我们测试方案里面,每个线程模拟一个用户,执行用户的登录.等 ...

  7. cetos6.8配置svn服务器

    一,安装步骤 1,  检查是否安装过svn rpm -qa subversion 2,  卸载旧版本svn yum remove subversion 3,  安装SVN,输入官网提供的命令 yum ...

  8. Nginx HTTP框架提供的请求相关变量

    L73 binary_remote_addr 对端二进制IPV4或IPV6 一般用作限制用户请求缓存key connection 递增链接序号 connection_requests  一条TCP链接 ...

  9. emwin之创建窗口与窗口回调函数的句柄是一致的

    @2019-04-28 [小记] 由函数GUI_CreateDialogBox 创建的窗口所返回的句柄与回调函数形参中的窗口句柄参数是一样的

  10. uploadify多文件上传实例--C#

    下载uploadify文件 http://www.uploadify.com/ HTML(视图) <html lang="zh-cn"> <head> &l ...