getComputedStyle和element.style有什么不同？

getComputedStyle 和 element.style 的主要区别在于它们访问和修改元素样式的方式不同。element.style 访问的是元素的内联样式，而 getComputedStyle 访问的是浏览器计算后的最终样式。

element.style:

• 访问和修改内联样式: element.style 直接访问和修改元素的内联样式，也就是写在 HTML 标签 style 属性中的样式。
• 只返回内联样式: 它只返回通过内联样式设置的属性值，即使该元素受到外部样式表或继承样式的影响，element.style 也只会返回内联样式中明确设置的值。 如果没有设置内联样式，则返回空字符串。
• 用于设置样式: 主要用于通过 JavaScript 动态地设置元素的样式。

getComputedStyle:

• 访问计算后的样式: getComputedStyle 返回浏览器计算后的元素最终样式，它包含了所有应用于该元素的样式规则，包括内联样式、外部样式表、继承样式和浏览器默认样式。
• 只读: getComputedStyle 返回的是一个只读的对象，不能用于直接修改元素的样式。 要修改样式，需要使用 element.style。
• 用于获取样式: 主要用于获取元素最终的样式信息，例如元素的实际宽度、高度、颜色等。
• 返回值: 返回一个 CSSStyleDeclaration 对象，包含了所有计算后的样式属性及其值。 注意，所有属性值都以字符串形式返回，例如 '10px'、'red'、'block' 等。 有些属性，例如 width，即使你在 CSS 中设置的是一个整数，返回的也会是一个字符串类型的像素值。

示例:

假设有以下 HTML 和 CSS：

<div id="myDiv" style="color: blue; width: 100px;">这是一个 div</div>

#myDiv {
  color: red;
  width: 200px;
}

JavaScript 代码：

const div = document.getElementById('myDiv');

// element.style 只返回内联样式
console.log(div.style.color); // 输出 "blue"
console.log(div.style.width); // 输出 "100px"
console.log(div.style.backgroundColor); // 输出 "" (因为没有设置内联的 background-color)

// getComputedStyle 返回计算后的最终样式
const computedStyle = window.getComputedStyle(div);
console.log(computedStyle.color); // 输出 "rgb(255, 0, 0)" (因为外部样式表覆盖了内联样式)
console.log(computedStyle.width); // 输出 "200px" (因为外部样式表覆盖了内联样式)
console.log(computedStyle.backgroundColor); // 输出 "rgba(0, 0, 0, 0)"  (浏览器默认的透明背景)


// 修改内联样式
div.style.color = 'green';
console.log(div.style.color); // 输出 "green"
console.log(computedStyle.color); // 输出 "rgb(0, 128, 0)" (修改内联样式会影响最终样式)


//  getComputedStyle 返回值是字符串
console.log(typeof computedStyle.width); // 输出 "string"

总结:

• 使用 element.style 设置内联样式，以及获取内联样式的值。
• 使用 getComputedStyle 获取元素最终的样式信息。

希望这个解释能够帮助你理解 getComputedStyle 和 element.style 的区别。