ホームページ > 記事 > ウェブフロントエンド > JavaScript を使用して CSS スタイルを変更する方法を調べる
JavaScript を使用して CSS スタイルを変更する方法を調べる
- PHPzオリジナル
- 2023-04-24 09:11:38434ブラウズ
CSS (Cascading Style Sheets) は、Web デザインでよく使用されるテクノロジーで、Web ページの外観やレイアウトを変更し、Web ページをより美しく、読みやすくします。この記事では、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>
この例では、2 つの 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 の
要素と 2 つの