ホームページ > 記事 > ウェブフロントエンド > JavaScript が CSS を呼び出す方法
JavaScript が CSS を呼び出す方法
- PHPzオリジナル
- 2023-05-16 09:39:07958ブラウズ
Web デザインと開発では、JavaScript と CSS を併用して、さまざまな素晴らしい視覚効果やインタラクティブな機能を実現します。 JavaScript が CSS をどのように呼び出すかはよくある質問ですが、これについては以下で詳しく説明します。
1. インライン スタイル
インライン スタイルは、以下に示すように、HTML タグの style 属性に直接適用できます:
<p style="color: red; font-size: 16px;">这是一个红色的段落</p>
JavaScript では、要素を変更できます。 style 属性を使用してインライン スタイルを変更します。例:
let p = document.querySelector("p");
p.style.color = "blue";
p.style.fontSize = "20px";これにより、上の赤い段落がフォント サイズ 20 ピクセルの青い段落に変わります。
2. 外部スタイル シート
外部スタイル シートは、CSS ルールのコレクションを別のファイルに配置する方法であり、そのファイルを HTML ドキュメントに関連付けることで、同じものを作成できます。スタイルルールを再利用しました。 JavaScript では、スタイル シートにリンクされているドキュメント内の要素の href 属性を変更することで、スタイル シートを変更できます。例:
<link rel="stylesheet" href="styles.css">
let link = document.querySelector("link");
link.href = "new-styles.css";これにより、styles.css にリンクされているドキュメント内のスタイルシートが、new-styles.css にリンクされたスタイルシートに変更されます。
3. 内部スタイル シート
内部スタイル シートは、HTML ドキュメントの head タグまたは body タグの間に CSS ルールのコレクションを配置する方法です。 JavaScript では、ドキュメントの style 属性を直接変更することで内部スタイル シートを変更できます。例:
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个红色的段落</p>
</body>let style = document.querySelector("style");
style.innerHTML = "p { color: blue; font-size: 20px; }";これにより、上の赤い段落がフォント サイズ 20 ピクセルの青い段落に変わります。
4. クラス名
クラス名は、特定の要素のスタイル ルールを定義する名前です。 JavaScript では、要素の classList 属性を変更することで、1 つ以上のクラスを追加または削除できます。例:
<style>
.red {
color: red;
}
.large {
font-size: 20px;
}
</style>
<p class="red">这是一个红色的段落</p>let p = document.querySelector("p");
p.classList.add("large");
p.classList.remove("red");これにより、上の赤い段落がフォント サイズ 20px の段落に変わります。
概要:
JavaScript は、インライン スタイル、外部スタイル シート、内部スタイル シート、クラス名など、さまざまなメソッドを使用して CSS を呼び出すことができます。これらのメソッドは、JavaScript を通じてドキュメント オブジェクト モデル (DOM) を直接操作して、視覚効果や対話型機能を実現できます。これらのスキルを習得すると、Web ページのスタイルと動作をより適切に管理および制御できるようになります。
以上がJavaScript が CSS を呼び出す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。