JavaScript スタンドアロンの CSS 変更-フロントエンドQ&A-php.cn

JavaScript スタンドアロンの CSS 変更

WBOY

リリース： 2023-05-09 17:33:09

オリジナル

412 人が閲覧しました

Web ページに動的な効果を追加したい場合は、JavaScript が最良の選択かもしれません。一般的な要件の 1 つは、ユーザーが Web ページ上で特定の操作を実行するときに、Web ページ要素のスタイルを動的に変更する必要があるということです。この時点で、JavaScript を使用して CSS スタイルを変更できます。

具体的には、JavaScript を通じて Web ページ上の要素を選択し、対応する CSS プロパティを変更できます。以下では、JavaScript を使用して CSS スタイルをスタンドアロンで変更する方法を説明します。

要素の選択

まず、スタイルを変更する Web 要素を選択する必要があります。要素を選択する方法はたくさんありますが、ここでは最も一般的な 2 つの方法について説明します。

方法 1 は、 document.getElementById() メソッドを使用することです。これには、要素の ID を表す文字列パラメーターを渡す必要があります。例:

var element = document.getElementById("myElement");

ログイン後にコピー

2 番目の方法は document.querySelector() メソッドを使用するもので、これには選択される要素を表す CSS セレクターを渡す必要があります。例:

var element = document.querySelector(".myClass");

ログイン後にコピー

スタイルの変更

スタイルを変更する要素を選択したら、JavaScript を使用してそのスタイルを変更できます。ここでは、いくつかの一般的な CSS スタイルプロパティとその変更方法を示します。

2.1. 要素の背景色の変更

style.backgroundColor プロパティを使用して要素の背景色を変更できます。例:

element.style.backgroundColor = "red";

ログイン後にコピー

2.2. 要素のテキストの色を変更する

style.color 属性を使用して、要素のテキストの色を変更できます。例:

element.style.color = "blue";

ログイン後にコピー

2.3. 要素のフォントサイズを変更する

style.fontSize プロパティを使用して、要素のフォントサイズを変更できます。例:

element.style.fontSize = "20px";

ログイン後にコピー

2.4. 要素の境界線スタイルを変更する

style.border プロパティを使用して、要素の境界線スタイルを変更できます。境界線のスタイル、幅、色を示す文字列パラメータを渡す必要があります。例:

element.style.border = "1px solid black";

ログイン後にコピー

Example

次に、JavaScript を使用して CSS スタイルをスタンドアロンで変更する例を示します。この例には、ユーザーがボタンをクリックしたときにテキストボックスの背景色を赤に変更する HTML ファイルと JavaScript ファイルが含まれています。両方のファイルを同じフォルダーに保存し、ブラウザーで HTML ファイルを開いて効果を確認できます。

HTML ファイル:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 修改 CSS 样式</title>
  <style>
    input {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>JavaScript 修改 CSS 样式</h1>
  <input type="text" id="myInput">
  <button id="myButton">单机我</button>
  <script src="style.js"></script>
</body>
</html>

ログイン後にコピー

JavaScript ファイル:

var myButton = document.getElementById("myButton");
var myInput = document.getElementById("myInput");

myButton.onclick = function() {
  myInput.style.backgroundColor = "red";
};

ログイン後にコピー

概要

JavaScript を使用して CSS スタイルをスタンドアロンで変更すると便利ですWeb ページの新しいスタイルを作成します。さらに動的な効果を追加します。この機能は、要素を選択してスタイルを変更することで実現できます。実際には、さらに多くの CSS プロパティと JavaScript メソッドを使用して、より複雑な効果を実現することもできます。

以上がJavaScript スタンドアロンの CSS 変更の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。