JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのDOMで要素の背景色を取得・設定する方法

JavaScriptで要素の背景色を扱うには、backgroundColorプロパティを使用します。このプロパティは、要素に設定されている背景色を取得（返す）できるだけでなく、新しい背景色を設定することも可能です。

backgroundColorプロパティとは

backgroundColorは、CSSのbackground-colorプロパティに対応するJavaScriptのスタイルプロパティです。document.bodyや特定のHTML要素に対してアクセスすることで、現在適用されている背景色の値を文字列として取得したり、任意の色を動的に設定したりできます。

サンプルコード

以下のコードを実行すると、ボタンをクリックしたときにページ全体の背景色が青色に変更されます。backgroundColorプロパティを使った背景色の操作方法を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">クリックして背景色を変更する</button>
      <script>
         function display() {
            document.body.style.backgroundColor = "blue";
         }
      </script>
   </body>
</html>

コードの解説

ボタンにはonclick属性が設定されており、クリックされるとdisplay()関数が呼び出されます。関数内では「document.body.style.backgroundColor = "blue"」という記述により、body要素の背景色を青色に設定しています。

なお、現在設定されている背景色を取得したい場合は、値を読み取るだけで実現できます。例えば次のように記述します。

const color = document.body.style.backgroundColor;
console.log(color); // 例: "blue"

このように、backgroundColorプロパティは読み書きの両方に対応しているため、背景色の取得と設定を柔軟に行うことができます。

  1. JavaScriptで要素のマージンを設定する方法をわかりやすく解説

    JavaScriptで要素のマージンを設定するには、marginプロパティを使用します。このプロパティを使うと、要素の外側の余白（マージン）を上下左右の4辺まとめて指定することができます。marginプロパティの基本的な使い方JavaScriptでは、element.style.marginに値を代入することでマージンを設定できます。値は「上・右・下・左」の順に半角スペースで区切って指定するのが基本です。サンプルコード以下の例では、ボタンをクリックすると段落要素の4辺すべてにマージンが設定されます。実際にコードをコピーしてブラウザで実行し、動作を確認してみてください。<!DOCTYPE

  2. JavaScriptで要素の周囲のアウトライン（輪郭線）の色を設定する方法

    JavaScriptで要素の周囲に表示されるアウトライン（輪郭線）の色を変更するには、outlineColorプロパティを使用します。このプロパティは、CSSのoutline-colorと同様の役割を持ち、色名やカラーコード（#5F5F5Fなど）を指定することで、要素の外側に描かれる線の色を自由に設定できます。なお、アウトラインはborder（境界線）とは異なり、レイアウトに影響を与えずに要素の外側に表示されるのが特徴です。以下のコード例では、ボタンをクリックするとdiv要素に太い実線のアウトラインが追加され、その色がグレー（#5F5F5F）に設定されます。サンプルコード<!DOCTYP