CSS getComputedStyle 返回一个CSSStyleDeclaration，但所有属性在访问时为空
在本文中，我们将介绍CSS中的getComputedStyle方法以及为什么在访问时返回的CSSStyleDeclaration对象的属性为空的问题。
阅读更多：CSS 教程
什么是getComputedStyle？
CSS中的getComputedStyle是一个用于获取元素所有计算后的样式的方法。它返回一个CSSStyleDeclaration对象，包含了元素的所有计算后的样式属性及其对应的值。
使用getComputedStyle方法可以方便地获取元素的样式信息，特别是那些通过CSS样式表进行定义的样式。例如，我们可以使用getComputedStyle方法获取元素的宽度、高度、颜色等属性信息。
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
const styles = getComputedStyle(box);
console.log(styles.width); // 输出：200px
console.log(styles.height); // 输出：200px
console.log(styles.backgroundColor); // 输出：rgb(255, 0, 0)
</script>
</body>
</html>
在上面的示例中，通过getComputedStyle方法获取了.box类的元素样式，并输出了宽度、高度和背景颜色的属性值。
为什么getComputedStyle返回的属性为空？
在访问getComputedStyle返回的CSSStyleDeclaration对象的属性时，有时可能会发现所有属性的值都为空。这可能是因为属性值的计算还没有完成，或者属性值被默认重置了。
属性值计算尚未完成
在页面的加载过程中，当浏览器解析和渲染HTML文档时，会根据CSS样式表对元素进行样式计算。但是，这个计算过程是异步的，需要一定的时间才能完成。
因此，在页面加载完成之前，直接访问getComputedStyle返回的CSSStyleDeclaration对象的属性可能会得到空值。这是因为属性值的计算还没有完成。
为了解决这个问题，我们可以在页面加载完成后再访问getComputedStyle返回的CSSStyleDeclaration对象的属性。可以使用以下方法确保在页面加载完成后再执行相关操作：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.addEventListener('load', function() {
const box = document.querySelector('.box');
const styles = getComputedStyle(box);
console.log(styles.width); // 输出：200px
console.log(styles.height); // 输出：200px
console.log(styles.backgroundColor); // 输出：rgb(255, 0, 0)
});
</script>
</body>
</html>
在上面的示例中，使用window.addEventListener('load', function() {})来监听页面加载完成的事件，确保在页面加载完成后再执行getComputedStyle的操作。这样就可以避免访问属性时得到空值的问题。
属性值被默认重置
另一个导致属性值为空的原因是属性值被默认重置了。当CSS样式被其他样式覆盖或者标签的默认样式被重置时，getComputedStyle返回的属性值将为空。
考虑以下示例：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
width: 300px; /* 鼠标悬停时宽度变为300px */
height: 300px; /* 鼠标悬停时高度变为300px */
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
const styles = getComputedStyle(box);
console.log(styles.width); // 输出：""（空值）
console.log(styles.height); // 输出：""（空值）
console.log(styles.backgroundColor); // 输出：rgb(255, 0, 0)
</script>
</body>
</html>
在上面的示例中，当鼠标悬停在.box元素上时，宽度和高度会变为300px。但是，由于getComputedStyle返回的CSSStyleDeclaration对象是在鼠标未悬停时计算的，因此它的属性值仍然是初始的200px。
解决这个问题的方法之一是，使用事件监听器来获取元素样式的实时值：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.box:hover {
width: 300px; /* 鼠标悬停时宽度变为300px */
height: 300px; /* 鼠标悬停时高度变为300px */
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box');
box.addEventListener('mouseover', function() {
const styles = getComputedStyle(box);
console.log(styles.width); // 输出：300px
console.log(styles.height); // 输出：300px
console.log(styles.backgroundColor); // 输出：rgb(255, 0, 0)
});
</script>
</body>
</html>
在上面的示例中，使用box.addEventListener('mouseover', function() {})来监听鼠标悬停事件，通过事件处理函数来获取元素样式的实时值，以避免属性值为空的问题。
总结
在使用getComputedStyle方法时，如果返回的CSSStyleDeclaration对象的属性为空，可能是因为属性值的计算尚未完成或者属性值被默认重置了。为了解决这个问题，可以确保在页面加载完成后再访问属性，并使用事件监听器来获取元素样式的实时值。通过以上方法，我们可以准确获取元素的计算后样式属性及其对应的值。
此处评论已关闭