本文分元素样式的获取和设置、元素位置大小计算、屏幕和窗口位置大小计算三部分来讲解，读完本文你将会学会
- 元素样式的获取的各种方法以及区别，在哪种情况是使用哪种方式最合适。
- 元素大小位置计算，弄懂了
client、scroll、offset三类api的区别。 screen、window对象关于位置、大小api，以及各自的区别。
元素样式的获取和设置
el.style、getComputedStyle 用来获取和设置元素样式。el.className、el.classList 用来获取和设置元素类名。el.getBoundingClientRect用来获取元素的位置和大小。
el.style
通过获取元素的style属性来获取元素样式。
语法
<head>
<style>
.div1 {
color: red;
}
</style>
</head>
<div id="div1" class="div1" style="font-size: 18px">style测试</div>const div1 = document.querySelector("#div1");
console.log(div1.style.fontSize); // 18px
console.log(div1.style.color); // 获取不到该样式特点
- 这种方式获取的样式属性值是驼峰式。
- 这种方式只能获取到元素的内联样式。
- 我们可以通过该方法设置元素样式。
常用方法
cssText
我们还可以使用cssText来获取样式的字符串。
console.log(div1.style.cssText); // font-size: 18px;setProperty
我们可以使用setProperty方法来设置元素样式。
注意我们设置元素样式的属性不是驼峰式写法。
div1.style.setProperty("font-weight", 600);
console.log(div1.style.fontWeight); // 600
// 当然这种方式也是可以的
div1.style.fontWeight = 600;
console.log(div1.style.fontWeight); // 600getPropertyValue
我们可以使用getPropertyValue方法来获取元素样式。
注意我们获取元素样式的属性不是驼峰式写法。
div1.style.getPropertyValue("font-size"); // 18px
// 当然这种方式也是可以的
console.log(div1.style.fontSize)removeProperty
我们可以使用removeProperty方法来移除元素某样式。
div1.style.removeProperty("font-weight");
// 当然这种方式也是可以的
div1.style.fontWeight = "";getComputedStyle(ele)
该方法挂载在window对象下，我们使用的时候可以省略window。
语法
<head>
<style>
.div1 {
color: red;
}
</style>
</head>
<div id="div1" class="div1" style="font-size: 18px">style测试</div>const div1 = document.querySelector("#div1");
console.log(getComputedStyle(div1).fontSize); // 18px
console.log(getComputedStyle(div1).color); // rgb(255, 0, 0)特点
- 这种方式获取的样式属性值是驼峰式。
- 能获取元素渲染后的所有样式包括内联和不内联样式。
- 只能获取元素的样式不能设置元素的样式。
el.getBoundingClientRect()
该方法能获取元素的长度和宽度（width、height）。并且能获取元素相对于浏览器窗口的位置信息（left、right、top、bottom）。
语法
<head>
<style>
.div1 {
color: red;
}
</style>
</head>
<div id="div1" class="div1" style="font-size: 18px">style测试</div>这里需要注意的是，距离计算只相对窗口顶部和左边计算。（bottom、right的计算需要注意）
const div1 = document.querySelector("#div1");
// bottom: 33 元素下边框距离视口顶部的距离
// height: 25 元素高度
// left: 8 元素左边框距离视口左部的距离
// right: 342 元素右边框距离视口左部的距离
// top: 8 元素上边框距离视口顶部的距离
// width: 334 元素的宽度
// x: 8 元素左上角相对于视口左侧的距离
// y: 8 元素左上角相对于视口顶部的距离
console.log(div1.getBoundingClientRect());特点
- 该方法只能获取元素位置和大小信息，不能获取到其他样式信息。
- 该方法不能设置元素样式。
el.className、el.classList
除了前面介绍的获取样式，我们还可以获取到类名，然后通过添加类名的方式给元素添加新的样式。
语法
console.log(div1.classList.value); // div1
console.log(div1.className); // div1
div1.className += " div2"; // 添加新类名 div2特点
el.className获取的是元素的类名字符串，我们可以使用该方法获取类名或者添加新的类名。el.classList.value获取的是类名字符串，如果单纯的想获取类名可以使用该方法。
总结
- 当我们需要设置某元素样式的时候我们可以使用
ele.style方法。 - 当我们需要获取元素渲染后的所有样式的时候我们可以使用
getComputedStyle(ele)方法。 - 当我们需要获取类名或者批量设置元素样式的时候可以使用
className方法。 - 当我们需要计算元素位置，或者计算元素是否在可视窗口内或者元素大小的时候我们可以使用
ele.getBoundingClientRect()方法。
有了上面获取元素样式的基础下面我们再来介绍一些元素位置、大小的api
元素位置、大小计算
关于元素位置大小计算主要有client、scroll、offset三类api。
client
client可以简单理解为元素可视大小。
clientWidth、clientHeight
clientWidth 为可视宽度，宽度包含内边距（padding）。不包含边框（border）、外边距（margin）、滚动条。
clientHeight 为可视高度，高度包含内边距（padding）。不包含边框（border）、外边距（margin）、滚动条。
clientTop、clientLeft
clientTop获取的是元素上边框的高度。
clientLeft获取的是元素左边框的宽度。
参看上面的例子
clientWidth为400px - 滚动条15px + 左右内边距20 = 405pxclientHeight为200px - 滚动条15px + 上下内边距20 = 205pxclientTop为上边框高度10pxclientLeft为左边框宽度10px
scroll
scroll可以简单理解为元素实际大小（可滚动大小）。
scrollWidth、scrollHeight
scrollWidth当元素没滚动条的时候和clientWidth一样，为可视宽度。当有滚动条的时候为可滚动的宽度。宽度包含内边距（padding）和滚动条。不包含边框（border）、外边距（margin）。
scrollHeight当元素没滚动条的时候和clientHeight一样，为可视高度。当有滚动条的时候为可滚动的高度。高度包含内边距（padding）和滚动条。不包含边框（border）、外边距（margin）。
scrollTop、scrollLeft
scrollTop获取的是容器元素在y轴上滚动的距离。
scrollLeft获取的是容器元素在x轴上滚动的距离。
参看上面的例子，我们在这里使用了box1.scrollBy(20, 10);模拟滚动。
scrollWidth为600px + 左右内边距20 = 620pxscrollHeight为500px + 上下内边距20 = 520pxclientTop为在y轴上滚动的距离10pxclientLeft为在x轴上滚动的近距离20px
offset
offset可以简单理解为元素占据大小（在文档中的占据空间大小）。
offsetWidth、offsetHeight
offsetWidth 宽度包含内边距（padding）、边框（border）、滚动条。不包含外边距（margin）。
offsetHeight 高度包含内边距（padding）、边框（border）、滚动条。不包含外边距（margin）。
offsetParent
offsetParent是一个只读属性，获得元素最近并采用定位的祖先元素或者最近的 table, td, th元素，再没找到就获取body元素，用于offsetLeft和offsetTop的计算。
offsetLeft、offseTop
offsetLeft相对offsetParent水平偏移距离。
offseTop相对offsetParent垂直偏移距离。
参看上面的例子
offsetWidth为400px - 滚动条15px + 滚动条15px + 左右内边距20 + 左右边框宽度20px = 440pxoffsetHeight为200px - 滚动条15px + 滚动条15px + 上下内边距20 + 上下边框宽度20px = 240pxoffsetParent因为外面没包裹其他元素，所以直接返回body元素。offsetTop因为margin为20px所以相对于body垂直偏移距离为20pxoffsetLeft因为margin为20px所以相对于body水平偏移距离为20px
屏幕和窗口位置、大小计算
screen
屏幕相关属性的获取。
width、height
这里 screen.width、screen.height获取的是电脑屏幕的宽度和高度，跟我们浏览器大小是无关的。
availWidth、availHeight
这里 screen.availWidth、screen.availHeight获取的是电脑屏幕的实际宽度和实际高度，如果有任务栏是需要去掉的。跟我们浏览器大小是无关的。
window
浏览器窗口相关属性的获取。
outerWidth、outerHeight
outerWidth返回的是浏览器整个的宽度，如果浏览器最大化的话和screen.availWidth值相等。
outerHeight返回的是浏览器整个的高度，如果浏览器最大化的话和screen.availHeight值相等。
innerWidth、innerHeight
innerWidth返回的是浏览器文档可视的宽度，只包括滚动条,不包括顶部的tab、和书签栏。
innerHeight返回的是浏览器文档可视的高度，只包括滚动条，不包括顶部的tab、和书签栏。
screenX、screenLeft
window.screenX、window.screenLeft获取的是浏览器窗口左上角相对于屏幕左边框的距离。
ie不支持window.screenX火狐不支持window.screenLeft
screenY、screenTop
window.screenY、window.screenTop获取的是浏览器窗口左上角相对于屏幕上边框的距离。
ie不支持window.screenY火狐不支持window.screenTop
scrollX、scrollY
window.scrollX返回的是窗口在x轴上滚动的距离。
window.scrollY返回的是窗口在y轴上滚动的距离。
pageXOffset、pageYOffset
window.pageXOffset返回的是窗口在x轴上滚动的距离。
window.pageYOffset返回的是窗口在y轴上滚动的距离。
注意：
这里scrollX、scrollY、pageXOffset、pageYOffset需要和上面的scrollTop、scrollLeft区分，这四个api只在window对象上有。相对于
scrollX、scrollY，pageXOffset、pageYOffset兼容性更好，一般我们只用pageXOffset、pageYOffset就行了。但两者都不兼容IE9以下。
后记
感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！
