JS知识点总结之getComputedStyle的用法
介绍
getComputedStyle() 是一个用于获取元素所有计算样式的函数。它的参数是要获取样式信息的元素，返回一个 CSSStyleDeclaration 对象，包含计算出的样式属性的键值对。
语法
getComputedStyle(element, [pseudoElement])
- element：要获取样式属性的元素。
- pseudoElement（可选）：伪元素名称。
返回值
CSSStyleDeclaration 对象，包含元素计算出的样式属性。
示例
1. 获取元素颜色属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>字体颜色为红色</p>
<script>
const pTag = document.querySelector('p');
const color = getComputedStyle(pTag).getPropertyValue('color');
console.log(color);
</script>
</body>
</html>
上面的代码使用了 getComputedStyle() 函数来获取 p 标签的颜色属性，并将结果存储到 color 变量中。最后将 color 输出到控制台中，可以看到输出结果为 red，即获取到了 p 标签的计算出的颜色属性。
2. 点击按钮获取元素宽度与高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box"></div>
<button onclick="getSize()">获取元素宽度与高度</button>
<script>
function getSize() {
const box = document.querySelector('#box');
const width = parseInt(getComputedStyle(box).width);
const height = parseInt(getComputedStyle(box).height);
alert(`元素宽度为：${width}px，元素高度为：${height}px`);
}
</script>
</body>
</html>
上面的代码包含一个按钮和一个 div 元素，当点击按钮时会弹出一个提示框，显示 div 元素的宽度和高度信息。使用了 getComputedStyle() 函数获取元素的计算样式，并使用 parseInt() 函数将宽度和高度解析为数字类型。最后将结果显示在提示框中。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js知识点总结之getComputedStyle的用法 - Python技术站
微信扫一扫 
支付宝扫一扫 