資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 JavaScript 獲取和設定 CSS 變數
要使用 JavaScript 獲取和設定 CSS 變數，我們可以使用多種方法。getComputedStyle() 方法返回一個物件，其中包含應用於目標元素的所有樣式。getPropertyValue() 方法用於從計算出的樣式中獲取所需的屬性。setProperty() 方法用於更改 CSS 變數的值。
在本文中，我們有一個 div 和一個按鈕，我們的任務是使用 JavaScript 獲取和設定 CSS 變數。透過獲取和設定 CSS 變數，我們將在點選按鈕時更改 div 的背景顏色。
使用 JavaScript 獲取和設定 CSS 變數的步驟
- 我們使用了 div 和 button 標籤來建立一個按鈕，並將其包裝在 div 容器內。
- 我們使用了 container 類來設定 高度、背景顏色，並使用 justify-content 和 align-items 屬性將按鈕居中。 display 屬性使 div 容器成為一個 彈性盒子。
- 我們使用了 :root 偽類選擇器在 CSS 中全域性宣告變數。我們全域性聲明瞭 --custom-bg-color 變數。
- 我們使用了 getPropertyValue('--custom-bg-color') 來獲取變數 custom-bg-color 的當前顏色值以確定背景顏色，並將其儲存在 currColor 中。
- 然後，我們使用了 if-else 條件語句來設定 div 的背景顏色。
- 如果 currColor 不是黑色，那麼我們使用 setProperty 方法將變數 --custom-bg-color 的值設定為黑色。它在點選時將背景顏色設定為黑色。
示例
這是一個實現上述步驟的示例，使用 JavaScript 獲取和設定 CSS 變數以在點選按鈕時更改 div 的背景顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<style>
:root {
--custom-bg-color: rgb(138, 21, 21);
}
.container {
display: flex;
justify-content: center;
height: 200px;
align-items: center;
background-color: var(--custom-bg-color);
}
button {
padding: 15px;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<button onclick="toggle()">
Change Theme
</button>
</div>
<script>
function toggle() {
let root = document.documentElement;
let currColor = getComputedStyle(root)
.getPropertyValue('--custom-bg-color');
if (currColor === 'rgb(138, 21, 21)') {
root.style.setProperty('--custom-bg-color', 'black');
} else {
root.style.setProperty('--custom-bg-color',
'rgb(138, 21, 21)');
}
}
</script>
</body>
</html>
結論
在本文中，為了使用 JavaScript 獲取和設定 CSS 變數，我們使用了 getComputedStyle()、getPropertyValue() 和 setProperty() 方法。我們使用了一個在點選按鈕時更改背景顏色的示例。我們使用 getPropertyValue() 獲取顏色值，並使用 setProperty() 設定 div 的新背景顏色。
更新於: 2024-10-28
13K+ 瀏覽量
廣告