如何使用JavaScript设置元素边框样式？

在本教程中，我们将学习如何使用JavaScript设置元素边框的样式。要设置元素边框的样式，请使用JavaScript中的borderStyle属性。

让我们详细讨论一下可用的borderStyle属性。

使用borderStyle属性

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

语法

以下是使用borderStyle属性使用JavaScript设置元素边框样式的语法：

object.style.borderStyle = style;

此语法允许我们将所需的边框样式设置为元素的样式。我们将在下面看到可用的style值。

参数

  • none - 不设置边框。

  • hidden - 与“none”类似。表格元素边框问题的唯一之处。

  • dotted - 设置点状边框。

  • dashed - 设置虚线边框。

  • solid - 设置实线边框。

  • double - 设置双线边框。总宽度等于边框宽度。

  • groove - 设置3D凹槽边框。效果取决于颜色。

  • ridge - 设置3D凸起边框。效果取决于颜色。

  • inset - 设置3D内嵌边框。效果取决于颜色。

  • outset - 设置3D外凸边框。效果取决于颜色。

  • initial - 将此属性设置为默认值。

  • inherit - 从其父元素继承此属性。

该属性的默认值为none。返回值是表示边框样式的字符串。

示例1

您可以尝试运行以下代码，使用JavaScript设置元素边框的样式：

<!DOCTYPE html>
<html>
<head>
   <style>
      #newDiv {
         height: 150px;
         width: 450px;
         border: 2px solid #000000;
      }
   </style>

   <body>
      <div id="newDiv">
         Demo Content!
      </div>
      <br>
      <button type="button" onclick="display()">Change border style</button>
      <script>
         function display() {
            document.getElementById("newDiv").style.borderStyle = "dashed";
         }
      </script>
   </body>
</html>

示例2

在这个程序中，我们将不同的边框样式设置为多个div元素。

当用户按下按钮时，我们将调用函数来根据上面给出的语法设置元素的边框样式。

<html>
<head>
   <style>
      .bordrStylEl {
         background-color: #FFFFFF;
         height: 50px;
         width: 60px;
         padding-top: 35px;
         padding-top: 5px;
         border: 5px solid blue;
         text-align: center;
         float: left;
         margin-right: 5px;
      }

      #bordrStylBtnWrap {
         margin-top: 10px;
         float: left;
      }
   </style>
</head>
<body>
   <h3> Setting the style of an element's border using the<i> borderStyle </i> property.
   </h3>
   <div class="bordrStylEl" id="bordrStylEl1"> Border 1 </div>
   <div class="bordrStylEl" id="bordrStylEl2"> Border 2 </div>
   <div class="bordrStylEl" id="bordrStylEl3"> Border 3 </div>
   <div class="bordrStylEl" id="bordrStylEl4"> Border 4 </div>
   <br>
   <div id="bordrStylBtnWrap"> <br />
      <p> Click the button to set different styles to an element's border. </p>
      <button onclick="setBorderStyle();"> Set </button>
   </div>
   <br>
</body>
<script>
   function setBorderStyle() {
      var bordrStylBtnWrap = document.getElementById("bordrStylBtnWrap");
      var bordrStylEl1 = document.getElementById("bordrStylEl1");
      var bordrStylEl2 = document.getElementById("bordrStylEl2");
      var bordrStylEl3 = document.getElementById("bordrStylEl3");
      var bordrStylEl4 = document.getElementById("bordrStylEl4");
      bordrStylEl1.style.borderStyle = "dashed";
      bordrStylEl2.style.borderStyle = "solid";
      bordrStylEl3.style.borderStyle = "dotted";
      bordrStylEl4.style.borderStyle = "double";
      bordrStylEl1.innerHTML = "<b> dashed </b>";
      bordrStylEl2.innerHTML = "<b> solid </b>";
      bordrStylEl3.innerHTML = "<b> dotted </b>";
      bordrStylEl4.innerHTML = "<b> double </b>";
   }
</script>
</html>

示例3

在这个程序中，我们将元素的边框样式设置为单个div元素。我们从用户那里获取元素的边框样式。

当用户按下按钮时，我们将调用函数来根据上面给出的语法设置元素的边框样式。

<html>
<head>
   <style>
      #bordrStylUsrEl {
         background-color: #FFFFFF;
         border: 5px solid purple;
         text-align: center;
      }
   </style>
</head>
<body>
   <h3>Setting the style of an element's border using the <i> borderStyle</i> property.
   </h3>
   <div id="bordrStylUsrEl"> Set the border style here. </div>
   <br>
   <div id="bordrStylUsrBtnWrap">
      <select id="bordrStylUsrSel" size="10">
         <option/> dotted
         <option/> dashed
         <option/> double
         <option/> groove
         <option/> inset
         <option/> none
         <option/> hidden
         <option/> outset
         <option/> ridge
         <option selected = "selected"/> solid
         <option/> inset
         <option/> outset
      </select>
      <br><br>
      <p> Provide the border style and click on the button. </p>
      <button onclick="setBorderStyle();"> Set </button>
   </div>
   <br>
</body>
   <script>
      function setBorderStyle() {
         var bordrStylUsrSelTag = document.getElementById("bordrStylUsrSel");
         var bordrStylUsrSelIndx = bordrStylUsrSelTag.selectedIndex;
         var bordrStylUsrSelStat = bordrStylUsrSelTag.options[bordrStylUsrSelIndx].text;
         var bordrStylUsrBtnWrap = document.getElementById("bordrStylUsrBtnWrap");
         var bordrStylUsrEl = document.getElementById("bordrStylUsrEl");
         bordrStylUsrEl.style.borderStyle = bordrStylUsrSelStat;
         bordrStylUsrEl.innerHTML =
            "You have set the element’s border style to <b>" + bordrStylUsrEl.style.borderStyle + "</b>";
      }
   </script>
</html>

在本教程中，我们学习了JavaScript中的borderStyle属性。borderStyle属性是JavaScript中用于设置元素边框样式的内置选项，非常易于编码。

更新于：2022年11月9日

1K+ 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.