js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结
今天再次遇到了offset***、client***、scroll***的这三类属性的问题,总是混淆,现归纳总结如下:
大体上来说可以这样理解:
client***属性(clientWidth、clientHeight):
表示元素可以看到内容的可见区域部分,一般是最后一个对象条以下到状况栏以上的这个区域,与页面内容无关。且它会直接返回属性的数值大小,可直接进行计算。分开说的话也可以这样理解:若元素大小小于父元素,大小包括padding、content部分,不包括border;若元素大小大于父元素,则表示可以看到的部分的高或宽。
offset***属性(offsetWidth、offsetHeight、offsetTop、offsetLeft):
对于offsetWidth和offsetHeight,都表示当前对象的宽度/高度。offsetWidth与style.widtht的区别是:若对象的宽度设定值为百分百宽度,无论页面变大或变小,style.width都返回此百分比;而offsetWidth则返回页面中对象的宽度值而不是百分比。
对于offsetTop和offsetLeft,都表示当前元素对象相对于其定位元素的垂直/水平偏移量。
scroll***属性(scrollTop、scrollLeft、scrollHeight、scrollWidth):
scroll是滚动条的意思,也就是scrollWidth、scrollHeight属性代表元素对象真实的宽高,即使有一部分看不到;scrollTop、scrollLeft代表元素对象最顶端/最左端到对象到当前窗口显示的局限内的距顶部/左边距的间隔,也是垂直/水平滚动条滚动了的距离。
有两个关系式是(当所有元素的margin与padding均初始化设为0时):
scrollHeight - scrollTop = clientHeight:当这两个条件成立时,也就代表垂直滚动条走到底了
scrollWidth - scrollLeft = clientWidth:当这两个条件成立时,也就代表水平滚动条走到底了
以上就是本人对以上属性元素的理解总结,如有错误之处,烦请指出,大家共同进步。
js中offsetHeight、clientHeight、scrollHeight等相关属性区分总结的更多相关文章
- offsetHeight,clientHeight,scrollHeight,offsetY等属性的理解
el.offsetHeight = height + padding + border(滚动条是在边框内的,自然也包括在内) el.clientHeight = 可视化看到的高度 (就是content ...
- css中的字体及文本相关属性
css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...
- Js中的数据属性和访问器属性
Js中的数据属性和访问器属性 在javaScript中,对象的属性分为两种类型:数据属性和访问器属性. 一.数据属性 1.数据属性:它包含的是一个数据值的位置,在这可以对数据值进行读写. 2.数据属性 ...
- 彻底搞清楚DOM元素的height,offsetHeight,clientHeight,scrollHeight
测试用例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 关于offsetTop offsetHeight clientHeight scrollHeight scrollTop的区别研究
我是以chrome浏览器做的研究. 先看一段代码: <script> window.addEventListener('DOMContentLoaded',function(){ var ...
- js中常用的对象—String的属性和方法
今天说一下,js中常用的内置对象——String对象它有以下几个常用的属性:lengthprototype 有以下几个常用的方法:parseInt()转换为数字parseFloat()转换为数字,支持 ...
- js中常用的对象—Array的属性和方法
今天说一下,js中常用的内置对象——Array对象 Array常用属性: length prototype :给系统对象添加属性和方法 Array常用方法: Array.prototype.sum = ...
- js中json对象数组按对象属性排序---1
转载:https://www.cnblogs.com/jasonwang2y60/p/6656103.html 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据js ...
- js中json对象数组按对象属性排序
在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序. 例如返回的数据结构大概是这样: { result:[ {id:,name:'中国银 ...
随机推荐
- 40个Android问题
1. Android的四大组件是哪些,它们的作用? 答:Activity:Activity是Android程序与用户交互的窗口,是Android构造块中最基本的一种,它需要为保持各界面的状态,做很多持 ...
- python 模块导入
1. 模块导入: 要使用一个模块,我们必须首先导入该模块.Python使用import语句导入一个模块.例如,导入系统自带的模块 math: import math 你可以认为math就是一个指向已导 ...
- 实现pushViewController:animated:的不同页面转换特效
1. 首先要明确的是,不使用pushViewController的默认动画,所以在调用这个函数时,要将animated设置为NO.2. 使用普通的来CATransition实现转换效果,代码如下:CA ...
- Android应用程序的生命周期
转自Android应用程序的生命周期 在对一个简单的Hello World工程进行项目结构剖析后,我们接着来学习下一个Android应用程序的生命周期是怎么样的,以便为后面的开发有个垫下良好的基石~ ...
- 【LA2796】Concert Hall Scheduling(最大费用最大流)
Description You are appointed director of a famous concert hall, to save it from bankruptcy. The hal ...
- leetcode面试准备: Jump Game II
1 题目 Given an array of non-negative integers, you are initially positioned at the first index of the ...
- SparkSQL配置和使用初探
1.环境 OS:Red Hat Enterprise Linux Server release 6.4 (Santiago) Hadoop:Hadoop 2.4.1 Hive:0.11.0 JDK:1 ...
- IN改写关联注意事项!
SQL> select * from a1; ID NAME ---------- ---------- 1 a 2 a SQL> select * from a2; ID NAME -- ...
- Android Studio启动时Fetching android sdk component information超时的解决方案
1)进入刚安装的Android Studio目录下的bin目录.找到idea.properties文件,用文本编辑器打开. 2)在idea.properties文件末尾添加一行: disable.an ...
- -_-#【响应式】matchMedia
谈谈响应式Javascript <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...