如何使用 JavaScript 设置左侧边框的样式？

在本教程中，我们将学习如何使用JavaScript设置左侧边框的样式。要在 JavaScript 中设置左侧边框的样式，请使用borderLeftStyle属性。在此属性下设置您想要的边框样式，例如实线、虚线等。让我们简要讨论一下我们的主题。

使用 borderLeftStyl 属性

使用此属性，我们可以设置或返回元素左侧边框的样式。

用户可以按照以下语法使用此属性。

语法

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.