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

HTMLDOMスタイルbackgroundColorプロパティ


backgroundColorプロパティは、要素の背景色を設定または返すために使用されます。標準名、rgb()、rgba()、hsl()、またはhsla()で値を指定できます。

構文

以下は、-

の構文です。

backgroundColorプロパティの設定-

object.style.backgroundColor = "color|transparent

上記のプロパティ値は次のように説明されます-

Sr.No 値と説明
1
背景色を指定します。
2 透明
背景色を透明に設定します。つまり、基になるコンテンツが表示されます。これはデフォルト値です。

backgroundColorプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      background-color: rgba(10,122,102,0.1);
   }
</style>
<script>
   function changeBackColor(){
      document.getElementById("DIV1").style.backgroundColor="rgba(1,200,55,0.5)";
      document.getElementById("Sample").innerHTML="The background color is now changed";
   }
</script>
</head>
<body>
<div id="DIV1">Duis tincidunt urna a interdum consectetur. Pellentesque nec pretium ante.
In nisl magna, vestibulum non vulputate vel, feugiat ac tellus. Sed tincidunt id leo at mollis.
Praesent pellentesque purus vitae scelerisque gravida. Pellentesque pulvinar scelerisque sem,
at euismod sapien tristique et.</div>
<p>Change the above div background color by clicking the below button</p>
<button onclick="changeBackColor()">CHANGE COLOR</button>
<p id="Sample"></p>
</body>
</html>

出力

これにより、次の出力が生成されます-

HTMLDOMスタイルbackgroundColorプロパティ

[クリップの変更]ボタンをクリックすると-

HTMLDOMスタイルbackgroundColorプロパティ


  1. HTMLDOMスタイルborderRightColorプロパティ

    HTML DOM borderRightColorプロパティは、要素の右境界線の色を取得または設定するために使用されます。 以下は、-の構文です。 borderRightColorプロパティの設定- object.style.borderRightColor = "color|transparent|initial|inherit" 上記の特性は次のように説明されます- 値 説明 色 右枠の色を指定します。デフォルトの色は黒に設定されています 透明 これにより、右の境界線の色が透明になり、基になるコンテンツが表示されます。 初期 このプロパティを

  2. HTMLDOMスタイルの色のプロパティ

    HTML DOM Style colorプロパティは、テキストの色を取得または設定するために使用されます。テキストの色は、16進数、rgb()、rgba()、hsl()、hsla()で指定するか、既知のキーワードを使用して指定できます。 以下は、-の構文です。 色のプロパティを設定する- object.style.color = "color|initial|inherit" 上記の特性は次のように説明されます- 値 説明 色 テキストの色の値を指定します。 初期 このプロパティを初期値に設定します。 継承 親プロパティ値を継承するには