JS“盒子模型”
列举几个常用的属性
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“盒子模型”的更多相关文章
- js盒子模型
1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...
- 关于js盒子模型的知识梳理
盒子模型 JS盒子模型中的13个常用属性: clientWidth/clientHeight:可视区域的宽高,宽高+PADDING组成 clientTop/clientLeft:上边框和左边框的宽度 ...
- js 盒子模型与盒子偏移量
js 盒子模型: 通过js中提供的一系列属性和方法获取页面中元素的样式信息值. 一.client系类—>只读属性不可设置 (当前元素的私有属性,和内容溢出没关系,如果给容器设置了高度,就采用设置 ...
- 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(' ...
- DOM盒子模型常用属性client,offset和scroll
JS盒子模型属性 在JS中通过相关的属性可以获取(设置)元素的样式信息,这些属性就是盒子模型属性(基本上都是有关于样式的) 属性 值 client top/left/width/height offs ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
- JQuery或JS判断浏览器内核版本号以及是否支持W3C盒子模型
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support .在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
随机推荐
- angularjs兼容thickbox 插件
ThickBox是一个基于JQuery类库的扩展,它能在浏览器界面上显示非常棒的UI框, 它可以显示单图片,多图片,ajax请求内容或链接内容.ThickBox 是用超轻量级的 jQuery 库 编写 ...
- Shell企业案例实战和企业面试题
shell企业面试题 1.批量创建带有随机小写字符文件程序 使用for循环在/pizza目录下创建10个html文件,其中每个文件包含10个随机小写字母加固定字母_pizza 1.思路分析: 核心是: ...
- 记一次因为session引起的并发问题
在做一个DSP系统(不要纠结这个系统是做什么的)时,碰到了一个很奇特的bug. 事情背景: 1.媒体方要求素材必须通过API提交给他们审核后,方可投放使用. 2.上线不久,运营反馈“每当提交素材的时候 ...
- php支持解密的加密算法示例
其实只是对位运算符的一种简单的应用. <?php class Helper_Inpass{ private $keys='thisismytoken';//token function inpa ...
- antd pro 分支
添加图片 这两种都可以 form表单问题 1 @Form.create() 这是绑定表单和组件,必须有,这样就能从this.props 中找到Form了 2 Select 要写initialValue ...
- vue 追书神器
app.vue页面 初始化数据,通过调用vuex mutation里定义的方法 调用保存到localstorage中的书架信息.搜索历史记录.字体大小和皮肤 并把这些数据保存的vuex state中 ...
- MacOS10.14下Eclipse安装lombok
按照网上的教程来做,会导致eclipse启动不了,这里记录一下解决方案: 一.复制lombok.jar到../Eclipse/下 二.修改eclipse.ini,在末尾追加: -Xbootclassp ...
- PHP实现部分字符隐藏
/** * 隐藏部分字符串 * # 此方法多用于手机号码或身份证号.银行卡号的中间部分数字的隐藏 */ function func_substr_replace($str, $replacement ...
- No repeats please 全排列
把一个字符串中的字符重新排列生成新的字符串,返回新生成的字符串里没有连续重复字符的字符串个数.连续重复只以单个字符为准 例如, aab 应该返回 2 因为它总共有6中排列 (aab, aab, aba ...
- MVC和MVVM
MVC和MVVM的qu'bie 1. Mvvm定义MVVM是Model-View-ViewModel的简写.即模型-视图-视图模型.[模型]指的是后端传递的数据.[视图]指的是所看到的页面.[视图模型 ...