探討如何用JavaScript來改變CSS的樣式
- PHPz原創
- 2023-04-24 09:11:38545瀏覽
CSS（層疊樣式表）是我們在網頁設計中經常使用的技術，它可以改變網頁的外觀和佈局，並且可以使網頁更加美觀和易於閱讀。在這篇文章中，我們將探討如何用JavaScript來改變CSS的樣式。
首先，在HTML中定義一個樣式表。以下是一個簡單的例子：
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
<div id="box">Hello World!</div>
<button id="redBtn">变成红色</button>
<button id="blueBtn">变成蓝色</button>
這個例子中，我們定義了兩個CSS樣式類別“red”和“blue”，分別設定了文字顏色為紅色和藍色。
然後，在JavaScript中，我們可以用document.querySelector()方法來取得DOM元素，用.style屬性來改變CSS樣式。下面是一個例子：
const box = document.querySelector('#box');
const redBtn = document.querySelector('#redBtn');
const blueBtn = document.querySelector('#blueBtn');
redBtn.onclick = () => {
box.style.color = 'red';
};
blueBtn.onclick = () => {
box.style.color = 'blue';
};
這個例子中，我們建立了三個變量，分別對應HTML中的
元素和兩個