JS中的offset

更新日期: 2019-03-31阅读: 4.6k标签: 宽高

一、offsetWidth与offsetHeight: 

 获取的是元素的实际宽高 = width + border + padding 

 注意点: 

 1.可以获取行内及内嵌的宽高 
 2.获取到的值是一个number类型,不带单位 
 3.获取的宽高包含border和padding 
 4.只能读取,不能设置
console.log ( div.offsetWidth );//width + border + padding
console.log (div.offsetHeight );//height + border + padding


二:offsetLeft与offsetTop: 

offsetLeft:获取自己左外边框与父级元素的左内边框的距离 
offsetTop:获取自己上外边框与父级元素的上内边框的距离

offsetTop 和 style.top 的区别:

1.最大区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.top 不可以 只有定位的盒子 才有 left top right
2.offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
3.offsetTop 只读,而 style.top 可读写。
4.如果没有给 html 元素指定过 top 样式,则 style.top 返回的是空字符串。
5.最重要的区别 style.left 只能得到 行内样式 offsetLeft 随便



三:offsetParent:获取最近的定位父元素 (自己定位参照的父元素)

注意点: 

1.如果元素自身是固定定位(fixed),则定位父级是null
2.如果元素自身是非固定定位,并且所有的父元素都没有定位,那么他的定位父级是body
3.body的定位父级是null

offsetParent 和 parentNode的区别:

如果当前元素的父级元素没有进行css定位(position为absolute或relative),offsetParent为body。 
如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。


链接: https://www.fly63.com/article/detial/2651

js获取元素,页面,屏幕,浏览器的宽度、高度方法总汇

js获取常用的获取网页,屏幕,滚动条等宽高,js获取元素的宽高等方法:clientHeight和clientWidth用于描述元素内尺寸, offsetHeight和offsetWidth用于描述元素外尺寸,lientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离...

css实现左边定宽右边自适应的5种方法总汇

在网页布局中,通常需要实现左边定宽右边自适应布局:实现方法有:浮动布局、flex布局、使用负margin、绝对定位、table布局

理解css中min-width和max-width,width与它们之间的区别联系

css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替,尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系

css中input与button在一行高度不一致的解决方法

在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。

css中width为auto或者100%的区别

css中width为auto或者100%的区别四个理论:某div不显示设置宽度那么width为auto;某div的width在默认情况设置的是盒子模型中content的值;某div的width为100%表示的是此div盒子内容部分的宽度为其父元素的宽度

js获取浏览器/界面宽高的问题_以及兼容性实现方案

js获取浏览器/界面宽高的问题:clientHeight和clientWidth获取可视区域大小,scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth,获取网页内容高度和宽度(可视区域包括滚动条等边线,会随窗口的显示大小改变)

基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

基于实现元素的展开收缩,max-height,给定足够大的高度,就是言义上的任意高度,相对height来说比较灵活,两者的区别就是计算高度的过程,一个是由人为计算,一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高。

css中设置了宽度,div内容溢出不换行的的原因和解决方法

当我们为div标签声明了宽度,文本内容为单词或者纯数字的时候会出现文本越界的情况。原因是由于:浏览器在解析我们页面的时候,给这一串数字当成一个词了,这样就不会自动切断字符串而进行换行。

css保持div等高宽比

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例,通过2种方式来实现这种效果。

js动态获取浏览器或页面等容器的宽高

首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些,有时候我们写了100%高度的时候,然后因为是当前页面的子页面,100%的只是父页面,而子页面有下拉条还有内容的话,一些东西就不能都获取到。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!