彻底弄懂元素样式、位置、大小相关计算-阿里云开发者社区

本文分元素样式的获取和设置、元素位置大小计算、屏幕和窗口位置大小计算三部分来讲解，读完本文你将会学会

元素样式的获取的各种方法以及区别，在哪种情况是使用哪种方式最合适。
元素大小位置计算，弄懂了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); // 600

getPropertyValue

我们可以使用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 = 405px
clientHeight 为 200px - 滚动条15px + 上下内边距20 = 205px
clientTop为上边框高度10px
clientLeft为左边框宽度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 = 620px
scrollHeight 为 500px + 上下内边距20 = 520px
clientTop 为在y轴上滚动的距离10px
clientLeft 为在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 = 440px
offsetHeight 为 200px - 滚动条15px + 滚动条15px + 上下内边距20 + 上下边框宽度20px = 240px
offsetParent 因为外面没包裹其他元素，所以直接返回body元素。
offsetTop 因为margin为20px所以相对于body垂直偏移距离为20px
offsetLeft 因为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以下。

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

彻底弄懂元素样式、位置、大小相关计算