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

1. 內(nèi)聯(lián)樣式
2. 操作類名
3. 引用外部CSS文件

在網(wǎng)頁(yè)開(kāi)發(fā)中，JavaScript（JS）和CSS是兩種重要的技術(shù)，它們協(xié)同工作以創(chuàng)建動(dòng)態(tài)和交互式的網(wǎng)站，雖然JS主要用于處理交互和動(dòng)態(tài)內(nèi)容，但它也可以用于操作和管理CSS樣式，下面我們將探討如何在JS中操作CSS樣式和引用CSS文件。

內(nèi)聯(lián)樣式

在JavaScript中，我們可以通過(guò)操作元素的style屬性來(lái)更改內(nèi)聯(lián)樣式，這種方式可以直接改變單個(gè)元素的樣式，無(wú)需引用外部CSS文件。

// 獲取元素
var element = document.getElementById('myElement');
// 修改樣式
element.style.color = 'red';  // 改變文字顏色
element.style.backgroundColor = '#fff';  // 改變背景色

操作類名

另一種常見(jiàn)的方式是通過(guò)JavaScript操作元素的類名來(lái)更改樣式，我們可以在CSS中定義不同的類，然后在JavaScript中添加或刪除元素的類名。

// 獲取元素
var element = document.getElementById('myElement');
// 添加類名
element.classList.add('myClass');
// 刪除類名
element.classList.remove('myClass');

在CSS中定義類：

.myClass {
  color: blue;
  font-size: 20px;
}

引用外部CSS文件

對(duì)于大量的樣式，我們通常將它們保存在外部的CSS文件中，然后在HTML文件中通過(guò)鏈接（link）元素引用，在JavaScript中，我們可以動(dòng)態(tài)地創(chuàng)建鏈接元素并將其添加到HTML文檔中。

var link = document.createElement('link');  // 創(chuàng)建鏈接元素
link.rel = 'stylesheet';  // 定義鏈接類型為樣式表
link.href = 'styles.css';  // 定義CSS文件路徑
document.head.appendChild(link);  // 將鏈接元素添加到head中

JavaScript提供了多種方式引用和操作CSS樣式，包括直接操作內(nèi)聯(lián)樣式、操作類名以及動(dòng)態(tài)引用外部CSS文件，這些技術(shù)使得網(wǎng)頁(yè)開(kāi)發(fā)更加靈活和動(dòng)態(tài)，可以根據(jù)用戶的行為和狀態(tài)實(shí)時(shí)改變樣式。