JavaScript を使用して CSS スタイルを変更する方法を調べる-フロントエンドQ&A-php.cn

JavaScript を使用して CSS スタイルを変更する方法を調べる

PHPz

リリース： 2023-04-24 10:32:15

オリジナル

484 人が閲覧しました

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 つの

ソース：php.cn

前の記事：JavaScript を使用して ArrayList を実装する方法について説明します。次の記事：HTMLでフォントスタイルを設定する方法

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事