offset，client，scroll的使用和区别 - 野生猿博客

offset，client，scroll的使用和区别

2020-05-15

字数：975 阅读时间：5min

阅读量：7899

offset偏移量

offsetWidth：元素在水平方向所占的空间大小(元素的宽；包括外边框，内边距和内容)
offsetHeight：元素子在垂直方向上所占的空间的大小( 元素的高；包括外边框，内边距和内容 )
offsetLeft：元素的左边框到包含元素的左边框的距离(注意包含元素具体是指哪个元素)
offsetTop：元素的上边框到包含元素的上边框的距离 (注意包含元素具体是指哪个元素)
offsetParent：包含该元素的那个元素； (包含元素：并不一定是这个元素的父元素，会沿着DOM树一直向上找直到找到有设置position的元素，这个元素才是该元素的包含元素)

offset视图

我们使用offsetLeft和offsetTop的时候，一般都是来获取元素距离页面顶部或者左边多少像素;这个时候我们需要利用offsetTop或offsetLeft配合offsetParent循环DOM树累加每一个offset值，直到DOM树的根元素(offsetParent = null)

//自己封装的方法
function elementTo(ele,lfOrTp){//参数：元素和方向
lfOrTp= lfOrTp === 'left'? 'offsetLeft':'offsetTop';//判断参数是left还是top
var offset = ele[lfOrTp];
var currentParent = ele.offsetParent;
while(currentParent != null){//直到DOM元素的根元素
offset += currentParent[lfOrTp];//每个包裹元素的offset相加
currentParent = currentParent.offsetParent;//该变包裹元素
}
return offset;//返回元素距离页面的顶部或者左边的值
}

1

2

3

4

5

6

7

8

9

10

11

//自己封装的方法

function elementTo(ele,lfOrTp){//参数：元素和方向

lfOrTp= lfOrTp === 'left'? 'offsetLeft':'offsetTop';//判断参数是left还是top

var offset = ele[lfOrTp];

var currentParent = ele.offsetParent;

while(currentParent != null){//直到DOM元素的根元素

offset += currentParent[lfOrTp];//每个包裹元素的offset相加

currentParent = currentParent.offsetParent;//该变包裹元素

}

return offset;//返回元素距离页面的顶部或者左边的值

}

client客户区

client表示的是元素客户区大小；指的是元素内容和内边距占据空间的大小；
- clientWidth：可视区宽度大小（不包括border）
- clientHeight：可视区高度大小（不包括border）
- clientLeft：可视区的左边距大小（borderLeft的宽度）
- clientTop：可视区上边距的大小（borderTop的大小）

client视图

一般我们使用clientWidth或者clientHeight就是获取视窗的大小；使用document.documentElement.clientWidth或者 document.body.clientWidth(兼容IE7以下版本)

scroll滚动区

scrollHeight：卷曲的高度和可视区的高度(即整个高度)
scrollWidth：卷曲的宽度和可视区的宽度(即整个宽度)
scrollTop：距离顶部已卷曲的高度
scrollLeft：距离左侧已卷曲的宽度

scroll视图

一般使用scroll就是获取页面卷曲的高度或宽度；这个时候需要注意获取页面的元素document.documentElement或者document.body（兼容IE7以下）

野生小园猿

励志做一只遨游在知识海洋里的小白鲨

查看“野生小园猿”的所有文章 →

相关推荐

野生小园猿

JS中call、apply、bind的使用

野生小园猿

手写PromiseA+规范的Promise代码

野生小园猿

浏览器工作原理

<	2025 年 1900 1901 1902 1903 1904 1905 1906 1907 1908 1909 1910 1911 1912 1913 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 2018 2019 2020 2021 2022 2023 2024 2025 2026 2027 2028 2029 2030 2031 2032 2033 2034 2035 2036 2037 2038 2039 2040 2041 2042 2043 2044 2045 2046 2047 2048 2049 2050 2051 2052 2053 2054 2055 2056 2057 2058 2059 2060 2061 2062 2063 2064 2065 2066 2067 2068 2069 2070 2071 2072 2073 2074 2075 2076 2077 2078 2079 2080 2081 2082 2083 2084 2085 2086 2087 2088 2089 2090 2091 2092 2093 2094 2095 2096 2097 2098 2099 2100		4 月 1 2 3 4 5 6 7 8 9 10 11 12	>		今天
11		2025		蛇	乙巳
11		APRIL
MON	TUE	WED	THU	FRI	SAT	SUN
31	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	1	2	3	4