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

JavaScriptで要素の不透明度（opacity）を設定する方法【初心者向け解説】

JavaScriptで要素の不透明度（透明度）を設定するには、CSSの opacity プロパティを使用します。style オブジェクト経由で opacity に「0 ～ 1」の範囲の値を指定することで、要素を好きな透明度で表示できます。

値が「1」なら完全に不透明、「0」なら完全に透明になります。例えば「0.5」を設定すると、要素は半透明で表示されます。

サンプルコード

以下のコードでは、ボタンをクリックすると div 要素の不透明度が「0.5」（半透明）に変更されます。実際に動作を確認してみましょう。

<!DOCTYPE html>
<html>
<head>
  <style>
    #box {
      width: 450px;
      background-color: gray;
    }
  </style>
</head>
<body>
  <p>下のボタンをクリックして、不透明度を設定してみましょう。</p>
  <button type="button" onclick="display()">不透明度を設定する</button>
  <div id="box">
    <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
    <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
    <p>これはdiv要素です。これはdiv要素です。これはdiv要素です。</p>
  </div>
  <br>
  <script>
    function display() {
      document.getElementById("box").style.opacity = "0.5";
    }
  </script>
</body>
</html>

コードの解説

  • document.getElementById("box")：id が「box」の要素を取得します。
  • .style.opacity = "0.5"：取得した要素の opacity プロパティに「0.5」を設定し、半透明にします。
  • onclick="display()"：ボタンがクリックされたタイミングで display 関数が実行されます。

opacity の値について

値表示
1完全に不透明（デフォルト）
0.5半透明
0完全に透明（見えなくなる）

このように、opacity プロパティを使えば数行のコードで簡単に要素の透明度を制御できます。アニメーションと組み合わせれば、フェードイン・フェードアウトなどの演出も実現可能です。

  1. JavaScriptで要素のアウトラインの幅を設定する方法

    JavaScriptで要素の周りのアウトライン（外枠）の幅を設定するには、outlineWidthプロパティを使用します。「7px」のような値を指定することで、アウトラインの太さを自由にコントロールできます。outlineWidthプロパティとはoutlineWidthは、CSSのoutline-widthに対応するJavaScriptのスタイルプロパティです。アウトラインを実際に表示するには、あわせてoutlineStyle（線の種類）とoutlineColor（線の色）も設定する必要があります。なお、アウトラインはborder（境界線）と似ていますが、要素のサイズやレイアウトに影響を与えず

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

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