CSS動態改變是一種常見的前端技術，它可以透過改變CSS樣式表中的樣式來改變網頁的外觀，使網頁更加生動活潑。本文將介紹CSS動態改變的原理、實作方式、實例應用。
一、原理
在HTML中，文字、圖片、連結等元素的展現都是由CSS樣式表來定義的。 CSS樣式表是一系列屬性及其值的組合，它決定了網頁上各個元素的顯示效果。 CSS樣式表由選擇器和聲明組成，選擇器指定了要套用樣式的HTML元素，聲明則描述了這些元素應該如何呈現。
CSS動態改變的原理其實很簡單，就是透過JavaScript修改CSS樣式表中指定元素的屬性值來改變網頁的外觀。例如改變某一元素的背景顏色、字體大小、位置、邊框樣式等。由於JavaScript能夠直接操作文檔物件模型（DOM），可以很方便地取得頁面內各個元素的節點資訊與屬性值，而這些資訊正是改變CSS樣式表所需的基本資料。
二、實作方式
在HTML頁面中應用CSS動態改變通常有以下幾種實作方式：
1.使用JS屬性運算
這種方法比較簡單，直接透過JS修改元素的style屬性即可。例如：
document.getElementById("myDiv").style.backgroundColor = "red";
這行程式碼就將ID為「myDiv」的HTML元素的背景顏色設為紅色。
2.使用CSS類切換
這種方法需要預先定義好多個CSS類，然後在JS程式碼中選取需要的類別來改變元素樣式。這種方式比較清晰，但需要額外製作多個CSS類別。例如：
CSS定義：
.myClass {
background-color: yellow;
}
.myClass2 {
background-color: red ;
}
JS程式碼：
document.getElementById("myDiv").className = "myClass2";
這行程式碼將ID為“myDiv”的HTML元素的類別名稱從“myClass”切換為“myClass2”，改變了背景顏色。
3.使用StyleSheet物件
這種方法需要取得樣式表對象，然後透過操作樣式表中的規則來改變元素樣式。這種方法靈活性比較高，但程式碼相對複雜。例如：
CSS定義：
.myClass {
background-color: yellow;
}
JS程式碼：
var styleSheet = document.styleSheets[0];
var rules = styleSheet.cssRules || styleSheet.rules;
rules[0].style.backgroundColor = "red";
這段程式碼先取得第一個樣式表對象，然後取得樣式規則集合rules。最後透過rules[0].style.backgroundColor將第一個規則的背景顏色改為紅色。
三、實例應用
1.更改元素背景顏色
透過以下程式碼可以實現當滑鼠放置於某一元素上時，將元素背景顏色改為隨機的顏色：
document.getElementById('myElement').addEventListener('mouseover', function () {
var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); this.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
});
2.更改文字顏色
透過以下程式碼可以實現點擊按鈕時，將指定元素中文字的顏色一次輪流變為紅、綠、藍：
var colors = ['red', 'green', ' blue'];
var currentIndex = 0;
document.getElementById('myButton').addEventListener('click', function () {
document.getElementById('myText').style.color = colors[currentIndex];
currentIndex ;
if (currentIndex == colors.length) {
currentIndex = 0;
}
});
3.更改圖片大小
#透過以下程式碼可以實現點擊圖片時，將圖片大小變成原來的兩倍：
document.getElementById('myImage').addEventListener('click', function () {
var width = this.width * 2;
var height = this.height * 2;
this.style.width = width 'px';
this.style.height = height 'px';
});
以上三個實例展示了CSS動態改變的基本應用方法，可以透過改變不同的屬性來實現更多特效。要注意的是，CSS動態改變雖然能讓網頁更加生動有趣，但也要保持適度，不要對使用者體驗產生負面影響。
以上是css動態改變的詳細內容。更多資訊請關注PHP中文網其他相關文章！
