JavaScript学习笔记【DAY7(2020.8.25)周二】

 

快捷尺寸

clientWidth     获取内容宽与左右padding之和

clientHeight    获取内容高与上下padding之和

offsetWidth    获取内容宽与左右padding与左右border宽度之和

offsetHeight   获取内容高与上下padding与上下border宽度之和

clientLeft        获取左边框宽度

clientTop        获取上边框宽度

/*

#div元素

width: 100px

height: 50px

padding: 20px

border: 20px solid red;

*/

var div = document.getElementById("div");

console.log(div.clientWidth); // 输出 140px

console.log(div.clientHeight); // 输出 90px

console.log(div.offsetWidth); // 输出 180px  内容宽 100 + padding 40 + border 40

console.log(div.clientWidth); // 输出 130px  内容高 50 + padding 40 + border 40

 

快捷位置与距离

offsetParent       定位父元素

指的是自身元素相对于的定位元素 如果一个元素自身没有定位 也会找到祖先元素中的第一个拥有定位的元素 如果都没有 就是body

offsetLeft            自己左边框外到定位父元素的左边框内 (IE8 到定位父元素的左边框外)

offsetTop            自己上边框外到定位父元素的上边框内 (IE8 到定位父元素的上边框外)

 

元素偏移量 offset 系列

offset 概述

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有定位父元素的位置
2. 获得元素自身的大小（宽度高度）
3. 注意：返回的数值都不带单位

offset系列属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素左边框的偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度，返回数值不带单位

offset 与 style 区别

offset

offset 可以得到任意样式表中的样式值

offset 系列获得的数值是没有单位的

offsetWidth 包含padding+border+width

offsetWidth 等属性是只读属性，只能获取不能赋值

所以，我们想要获取元素大小位置，用offset更合适

style

style 只能得到行内样式表中的样式值

style.width 获得的是带有单位的字符串

style.width 获得不包含padding和border 的值

style.width 是可读写属性，可以获取也可以赋值

所以，我们想要给元素更改值，则需要用style改变

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding、内容区的宽度,不含边框,返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度， 不含边框，返回数值不带单位

 

 

 

元素滚动 scroll 系列

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

 

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度， 不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框,返回数值不带单位

 

他们主要用法：

1.offset系列 经常用于获得元素位置    offsetLeft  offsetTop

2.client经常用于获取元素大小  clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop  scrollLeft  

4.注意页面滚动的距离通过 window.pageXOffset  获得