CSS是前端開發中不可避免的一部分，它可以控制網頁的外觀及樣式。而在CSS中，我們需要取出元素的屬性值以實現所需效果。下面我們就來學習一下如何通過CSS來取元素屬性的值。

/* 取顏色屬性值 */
.box{
background-color: #F00;
}
var bgColor = window.getComputedStyle(document.querySelector('.box')).getPropertyValue('background-color');
console.log(bgColor);
//控制臺輸出結果：rgb(255, 0, 0)
/* 取字體大小屬性值 */
.box{
font-size: 18px;
}
var fontSize = window.getComputedStyle(document.querySelector('.box')).getPropertyValue('font-size');
console.log(fontSize);
//控制臺輸出結果：18px
/* 取文本顏色屬性值 */
.box{
color: #333;
}
var textColor = window.getComputedStyle(document.querySelector('.box')).getPropertyValue('color');
console.log(textColor);
//控制臺輸出結果：rgb(51, 51, 51)

以上代碼展示了如何通過getComputedStyle方法取得元素的屬性值。該方法返回的是一個對象，我們可以通過該對象的getPropertyValue方法來獲取屬性值。其中，querySelector方法獲得了要取屬性的元素，括號內為要取屬性的元素的class名字。getPropertyValue方法的參數為所需屬性的屬性名，例如，“background-color”。

值得注意的是，窗口getComputedStyle方法返回的所有值都是string類型的，在后續使用中要注意類型轉換的問題。