如何使用 JavaScript 設定左邊界樣式？

在本教程中，我們將學習如何使用JavaScript設定左邊界樣式。要在 JavaScript 中設定左邊界樣式，請使用borderLeftStyle屬性。在此屬性下設定您想要的邊界樣式，例如實線、虛線等。讓我們簡要討論一下我們的主題。

使用 borderLeftStyle 屬性

使用此屬性，我們可以設定或返回元素左邊界的樣式。

使用者可以按照以下語法使用此屬性。

語法

object.style.borderLeftStyle = style;

此語法允許將所需的邊界樣式設定為元素的樣式。

引數

  • style − 設定左邊界的樣式。可用的樣式值在下面的值部分解釋。

值

  • none − 不設定邊界。
  • hidden − 與“none”類似。表格元素邊界問題的唯一之處。
  • dotted − 設定點狀邊界。
  • dashed − 設定虛線邊界。
  • solid − 設定實線邊界。
  • double − 設定雙邊界。總寬度等於邊框寬度。
  • groove − 設定 3D 凹槽邊界。效果取決於顏色。
  • ridge − 設定 3D 凸起邊界。效果取決於顏色。
  • inset − 設定 3D 內嵌邊界。效果取決於顏色。
  • outset − 設定 3D 外凸邊界。效果取決於顏色。
  • initial − 將此屬性設定為預設值。
  • inherit − 從其父元素繼承此屬性。

此屬性預設為 none。返回值是代表左邊界樣式的字串。

示例 1

您可以嘗試執行以下程式碼，以瞭解如何設定左邊界樣式：

<!DOCTYPE html>
<html>
<head>
<style>
   #box {
      border: thick solid gray;
      width: 300px;
      height: 300px;
   }
</style>
</head>
<body>
   <div id="box">Demo Text</div>
   <br><br>
   <button type="button" onclick="display()">Set left border
   style</button>
   <script>
      function display() {
         document.getElementById("box").style.borderLeftStyle=
         "dashed";
      }
   </script>
</body>
</html>

示例 2

在此程式中，我們將左邊界樣式設定為 div 元素。我們從使用者那裡獲取左邊界樣式。

當用戶點選按鈕時，我們呼叫函式根據上面給出的語法設定左邊界樣式。

<html>
<head>
<style>
   #lftBordrUsrEl{
      background-color: #FFFFFF;
      height: 50px;
      padding-top: 35px;
      padding-left: 5px;
      border-left-width: 5px;
      border-left-color: #D2B48C;
   }
</style>
</head>
<body>
   <h3> Setting the left border style using the borderLeftStyl Property</h3>
   <div id = "lftBordrUsrEl"> Set the left border style here. </div>
   <br>
   <div id = "lftBordrUsrBtnWrap">
      <select id = "lftBordrUsrSel" size = "10">
         <option> dotted </option>
         <option> dashed </option>
         <option> double </option>
         <option> groove </option>
         <option> inset </option>
         <option> none </option>
         <option> hidden </option>
         <option> outset </option>
         <option> ridge </option>
         <option selected="selected"> solid </option>
         <option> inset </option>
         <option> outset </option>
      </select>
      <br><br>
      <p> Provide the border left style and click on the button. </p>
      <button onclick="setLeftBorderStyle();"> Set Left Border </button>
   </div>
   <br>
</body>
<script>
   function setLeftBorderStyle(){
      var lftBordrUsrSelTag=document.getElementById("lftBordrUsrSel");
      var lftBordrUsrSelIndx=lftBordrUsrSelTag.selectedIndex;
      var lftBordrUsrSelStat=lftBordrUsrSelTag.options[lftBordrUsrSelIndx].text;
      var lftBordrUsrBtnWrap=document.getElementById("lftBordrUsrBtnWrap");
      var lftBodrUsrEl=document.getElementById("lftBordrUsrEl");
      lftBodrUsrEl.style.borderLeftStyle=lftBordrUsrSelStat;
      lftBodrUsrEl.innerHTML="You have set the left border style to <b>"
      + lftBodrUsrEl.style.borderLeftStyle + "</b>";
   }
</script>
</html>

示例 3

在此程式中，我們將左邊界樣式設定為 div 元素。當用戶點選按鈕時，我們按照獲取左邊界樣式的語法向用戶顯示左邊界樣式。

<html>
<head>
<style>
   #lftBordrGetEl{
      background-color: #87CEEB;
      height: 100px;
      padding-top:70px;
      border-left-width: 10px;
      border-left-color: #708090;
   }
</style>
</head>
<body>
   <p> Getting the style of the left border using the borderLeftStyle property.</p>
   <div id="lftBordrGetEl" style="border-left-style: dotted">Get the left border style of this element. </div>
   <br>
   <div id="lftBordrGetBtnWrap">
      <p> Click on the button to get the style. </p>
      <button onclick="getLeftBorderStyle();"> Get </button>
   </div>
   <br>
   <p id="lftBordrGetOp"> </p>
</body>
<script>
   function getLeftBorderStyle(){
      var lftBordrGetBtnWrap=document.getElementById("lftBordrGetBtnWrap");
      var lftBordrGetEl=document.getElementById("lftBordrGetEl");
      var lftBordrGetOp=document.getElementById("lftBordrGetOp");
      lftBordrGetOp.innerHTML="The left border style is=<b>"
      + lftBordrGetEl.style.borderLeftStyle + "</b>";
   }
</script>
</html>

在本教程中，我們學習了 JavaScript 中的 borderLeftStyle 屬性。要設定左邊界樣式，此屬性是 JavaScript 中的內建屬性，非常易於編寫程式碼。

更新於：2022年11月22日

230 次瀏覽

啟動您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.