JavaScript が CSS を呼び出す方法-フロントエンドQ&A-php.cn

JavaScript が CSS を呼び出す方法

PHPz

リリース： 2023-05-16 09:39:07

オリジナル

1038 人が閲覧しました

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 サイトの他の関連記事を参照してください。