探討如何用JavaScript來改變CSS的樣式

PHPz
發布: 2023-04-24 10:32:15
原創
480 人瀏覽過

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中的

元素和兩個
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板