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
作者最新文章
-
2024-10-13 11:44:01
-
2024-10-13 09:56:31
-
2024-10-11 20:58:41
-
2024-10-11 16:53:11
-
2024-10-11 11:54:51
-
2024-10-10 16:21:01
-
2024-10-10 15:18:02
-
2024-10-10 13:34:01
-
2024-10-10 13:26:26
-
2024-10-10 11:38:42