本文目錄導(dǎo)讀：

1. 獲取元素
2. 設(shè)置樣式
3. 動(dòng)態(tài)樣式變化

原生JavaScript與CSS樣式的交互

在網(wǎng)頁(yè)開(kāi)發(fā)中，我們經(jīng)常使用JavaScript來(lái)動(dòng)態(tài)地改變頁(yè)面的樣式，雖然我們可以直接在HTML元素中使用內(nèi)聯(lián)樣式或者通過(guò)CSS文件定義樣式，但使用原生JavaScript來(lái)設(shè)置CSS樣式同樣是一種強(qiáng)大且靈活的方式，下面我們將探討如何使用原生JavaScript設(shè)置CSS樣式。

獲取元素

我們需要獲取到想要改變樣式的HTML元素，這可以通過(guò)各種方法實(shí)現(xiàn)，如通過(guò)id、class或者標(biāo)簽名獲取元素。

var element = document.getElementById('myElement'); // 通過(guò)id獲取元素
var elements = document.getElementsByClassName('myClass'); // 通過(guò)class獲取元素（返回的是一個(gè)數(shù)組）
var allElements = document.getElementsByTagName('div'); // 通過(guò)標(biāo)簽名獲取元素（返回的是一個(gè)數(shù)組）

設(shè)置樣式

獲取到元素之后，我們就可以使用JavaScript來(lái)設(shè)置其樣式了，我們可以通過(guò)訪問(wèn)元素的style屬性來(lái)改變樣式。

element.style.color = 'red'; // 改變文字顏色為紅色
element.style.backgroundColor = 'blue'; // 改變背景顏色為藍(lán)色
element.style.fontSize = '20px'; // 改變字體大小為20px

動(dòng)態(tài)樣式變化

除了直接設(shè)置樣式之外，我們還可以根據(jù)條件動(dòng)態(tài)地改變樣式，我們可以根據(jù)窗口的大小變化來(lái)動(dòng)態(tài)調(diào)整元素的寬度：

window.onresize = function() {
    var width = window.innerWidth; // 獲取窗口的寬度
    if (width < 600) {
        element.style.width = '100%'; // 當(dāng)窗口寬度小于600px時(shí)，設(shè)置元素寬度為100%
    } else {
        element.style.width = '500px'; // 當(dāng)窗口寬度大于或等于600px時(shí)，設(shè)置元素寬度為500px
    }
};

使用原生JavaScript來(lái)設(shè)置CSS樣式是一種非常靈活且強(qiáng)大的方式，我們可以根據(jù)需求動(dòng)態(tài)地改變?cè)氐臉邮?，從而?shí)現(xiàn)更豐富、更交互的網(wǎng)頁(yè)效果。