CSS 获取元素的CSS属性（宽度/高度）值与设置值（百分比/em/px等）一致

在本文中，我们将介绍如何通过CSS获取元素的宽度或者高度的值，并确保与设置值一致。我们将涵盖不同单位（百分比/em/px等）的示例，并提供详细说明。

阅读更多：CSS 教程

1. 获取元素的宽度值

要获取元素的宽度值，我们可以使用getComputedStyle方法。该方法返回一个包含所有计算样式的对象，我们可以通过它来获取元素的宽度值。

// HTML
<div id="element" style="width: 50%;"></div>

// JavaScript
var element = document.getElementById("element");
var style = window.getComputedStyle(element);
var width = style.getPropertyValue("width");

console.log(width); // 输出 "50%"

在上面的示例中，我们创建了一个具有50%宽度的<div>元素，并使用getComputedStyle方法获取了其计算后的样式，然后通过getPropertyValue方法获取了宽度的值。最后，我们将其打印到控制台上，结果为”50%”。

2. 获取元素的高度值

获取元素的高度与获取宽度的方法类似，我们可以使用getComputedStyle方法和getPropertyValue方法来实现。

// HTML
<div id="element" style="height: 200px;"></div>

// JavaScript
var element = document.getElementById("element");
var style = window.getComputedStyle(element);
var height = style.getPropertyValue("height");

console.log(height); // 输出 "200px"

在上述示例中，我们创建了一个高度为200像素的<div>元素，并通过相同的方法获取了其计算后的高度值。最后我们将其打印到控制台上，结果为”200px”。

3. 不同单位的示例

在CSS中，我们可以使用不同的单位来设置元素的宽度或高度。接下来，我们将以不同的示例来展示如何获取这些单位的值。

3.1 百分比单位

// HTML
<div id="element" style="width: 50%;"></div>

// JavaScript
var element = document.getElementById("element");
var style = window.getComputedStyle(element);
var width = style.getPropertyValue("width");

console.log(width); // 输出 "50%"

在上述示例中，我们创建了一个宽度为50%的<div>元素，并获取了其宽度的值。

3.2 像素单位

// HTML
<div id="element" style="width: 200px;"></div>

// JavaScript
var element = document.getElementById("element");
var style = window.getComputedStyle(element);
var width = style.getPropertyValue("width");

console.log(width); // 输出 "200px"

在上面的示例中，我们创建了一个宽度为200像素的<div>元素，并获取了其宽度的值。

3.3 em单位

// HTML
<div id="element" style="width: 2em;"></div>

// JavaScript
var element = document.getElementById("element");
var style = window.getComputedStyle(element);
var width = style.getPropertyValue("width");

console.log(width); // 输出 "2em"

在上述示例中，我们创建了一个宽度为2em的<div>元素，并获取了其宽度的值。