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

HTMLDOMスタイルborderLeftColorプロパティ

HTML DOM borderLeftColorプロパティは、要素の左境界線の色を取得または設定するために使用されます。

以下は、-

の構文です。

borderImageWidthプロパティの設定-

object.style.borderLeftColor = "color|transparent|initial|inherit"

上記の特性は次のように説明されます-

値 説明
色 左枠の色を指定します。デフォルトの色は黒に設定されています
透明 これにより、左の境界線の色が透明になり、基になるコンテンツが表示されます。
初期 このプロパティをデフォルト値に設定します。
継承 親プロパティ値を継承します。

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

例

<!DOCTYPE html>
<html>
<head>
<style>
   #IMG1{
      border-left:solid 8px;
      border-left-color: orange;
   }
</style>
<script>
   function changeBorderLeft(){
      document.getElementById("IMG1").style.borderLeftColor="lightgreen";
      document.getElementById("Sample").innerHTML="The border left color is now changed to green";
   }
</script>
</head>
<body>
<img id="IMG1" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">
<p>Change the above image border left color by clicking the below button</p>
<button onclick="changeBorderLeft()">Change Border Color</button>
<p id="Sample"></p>
</body>
</html>

出力

HTMLDOMスタイルborderLeftColorプロパティ

「境界線の色を変更」をクリックすると ボタン-

HTMLDOMスタイルborderLeftColorプロパティ

上記の例では-

cssスタイルが適用されたID「DIV1」の画像要素を作成しました。 cssスタイルは、境界線の左側のスタイルと境界線の左側の色を指定します。

#IMG1 {
   border-left:solid 8px;
   border-left-color: orange;
}
<img id="IMG1" src=" https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">

次に、「境界線の色を変更」という名前のボタンを作成しました。 ユーザーがクリックするとchangeBorderLeft（）メソッドを実行します-

<button onclick="changeBorderLeft()">Change Border Color</button>

changeBorderLeft（）メソッドは、getElementById（）メソッドを使用してIDが「IMG1」の要素を取得し、そのborderLeftColorスタイルプロパティをlightgreenに設定します。これにより、左の境界線の色が薄緑色に変更され、innerHTMLプロパティ-

を使用して、IDが「Sample」の段落にこの変更が表示されます。 
function changeBorderLeft(){
   document.getElementById("IMG1").style.borderLeftColor="lightgreen";
   document.getElementById("Sample").innerHTML="The border left color is now changed to green";
}

  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" 上記の特性は次のように説明されます- 値 説明 色 テキストの色の値を指定します。 初期 このプロパティを初期値に設定します。 継承 親プロパティ値を継承するには