JavaScript中style、currentStyle、getComputedStyle及getBoundingClientRect的使用与区别

Javascript中style、currentStyle、getComputedStyle及getBoundingClientRect的使用与区别

在Javascript中，获取或设置元素样式的方式有多种，其中最常用的是通过element.style来访问或修改元素的内联样式。然而，这种方式仅限于获取直接定义在HTML标签内的样式，对于通过外部CSS文件或标签定义的样式则无能为力。因此，为了更全面地操作CSS样式，我们需要了解其他几种方法。

style: 这个属性在所有主流浏览器中均得到支持，可以用来读取或设置元素的内联样式。但是，它无法读取外部样式表中的样式，当尝试读取未在内联样式中定义的属性时，会返回空字符串。

示例代码: element.style.propertyName 用于获取，element.style.propertyName = 'value'; 用于设置。

currentStyle: 该属性仅在Internet Explorer（IE）中可用，用于获取元素的实际样式，包括来自外部样式表的样式。它不支持非IE浏览器。

使用方式: element.currentStyle.propertyName 或 element.currentStyle['propertyName']。

getComputedStyle: 这个方法在现代浏览器中广泛支持，如Firefox、Chrome、Safari等，但不被早期版本的IE支持。它可以获取到元素的所有计算后的样式值，包括继承自父元素的样式。

调用方式: window.getComputedStyle(element, pseudoElt).propertyName 或 window.getComputedStyle(element, pseudoElt)['propertyName']，其中pseudoElt通常为null。

注意：currentStyle和getComputedStyle都不能用来设置样式，它们只能用于读取。

为了实现跨浏览器兼容，可以使用如下函数：function getStyle(element, property) { if (window.getComputedStyle) { return window.getComputedStyle(element, null)[property]; } else { return element.currentStyle[property]; }}

getBoundingClientRect(): 此方法返回一个对象，包含元素相对于视口的位置信息，包括left、top、right、bottom、width和height等属性。这些属性提供了元素在页面上的精确位置，对于布局调整非常有用。

示例代码: const element = document.getElementById('elementId'); console.log(element.getBoundingClientRect().top); 可以获取元素顶部相对于视口顶部的距离。

需要注意的是，IE浏览器在计算getBoundingClientRect()的值时，默认从(2,2)点开始，这可能导致与其他浏览器的测量结果相差2个像素。可以通过减去document.documentElement.clientTop和document.documentElement.clientLeft来修正这一偏差。

修正后的代码示例如下：function getRect(element) { const rect = element.getBoundingClientRect(); const topOffset = document.documentElement.clientTop; const leftOffset = document.documentElement.clientLeft; return { top: rect.top - topOffset, bottom: rect.bottom - topOffset, left: rect.left - leftOffset, right: rect.right - leftOffset }; }