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 つの
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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