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中的
元素和兩個
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
-
2025-02-28 14:37:10
-
2025-02-26 03:55:10
-
2025-02-26 03:00:17
-
2025-02-25 23:04:13
-
2025-02-25 21:02:11
-
2025-02-25 19:31:14
-
2025-02-25 18:28:09
-
2025-02-25 16:54:10
-
2025-02-24 12:34:11
-
2025-02-24 12:29:09
最新問題
-
2025-03-21 18:23:34
-
2025-03-21 18:21:49
-
2025-03-21 18:21:04
-
2025-03-21 11:55:26
-
2025-03-21 11:54:34
