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

HTMLDOMスタイルborderTopColorプロパティ

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

以下は、-

の構文です。

borderTopColorプロパティの設定-

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

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

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

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

例

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

出力

HTMLDOMスタイルborderTopColorプロパティ

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

HTMLDOMスタイルborderTopColorプロパティ

上記の例では-

cssスタイルが適用されたID「IMG1」の画像要素を作成しました。 cssスタイルは、ボーダートップスタイルとボーダートップカラーを指定します。

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

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

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

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

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

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