如何在 JavaScript 中获取 CSS 属性的当前值?

cssjavascriptweb developmentfront end technology更新于 2024/8/27 17:48:17

getComputedStyle() 方法提供一个对象，其中包含应用于目标元素的所有样式。

示例

以下示例说明了如何使用 JavaScript 获取和设置 CSS 变量。

<!DOCTYPE html>
<html>
<head>
<style>
div {
   margin: 4%;
   padding: 4%;
   width: 50%;
   text-align: center;
   background-color: powderblue;
   border-radius: 4%;
}
</style>
</head>
<body>
<div>Test Div</div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('background-color: ' + getStyle.getPropertyValue('background-color') + '.');
</script>
</body>
</html>

输出

这将产生以下结果 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
div {
   display: flex;
   margin: 4%;
   padding: 4%;
   width: 20vh;
   height: 20vh;
   box-shadow: inset 0 0 23px cadetblue;
   border: 2px groove green;
   border-radius: 50%;
}
</style>
</head>
<body>
<div><div></div></div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('box-shadow: ' + getStyle.getPropertyValue('box-shadow') + '.');
</script>
</body>
</html>