如何使用 JavaScript 设置顶部边框的样式？

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

让我们简要讨论一下 JavaScript 中可用于实现此目的的属性。

使用 borderTopStyle 属性

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

语法

以下是使用 JavaScript 中的 borderTopStyle 属性设置顶部边框样式的语法：

object.style.borderTopStyle = value;

这里我们将 object 的顶部边框样式设置为“value”。

我们将在下面看到可用的 value 值：

  • 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>
      #box {
         border: thick solid gray;
         width: 500px;
         height: 300px;
      }
   </style>
</head>
   <body>
   <div id="box">Demo Text</div>
   <br>
   <p> Click the "Change top border style" button to change the style of top border to "dashed".</p>
   <br>
   <button type="button" onclick="display()">Change top border style</button>
   <script>
      function display() {
         document.getElementById("box").style.borderTopStyle = "dashed";
      }
   </script>
</body>
</html>

示例 2

在此程序中，我们正在为多个 div 元素设置不同的顶部边框样式。

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

<html>
<head>
   <style>
      .topBordrEl{
         background-color: #FFFFFF;
         height: 150px;
         width: 140px;
         padding-top: 35px;
         padding-top: 5px;
         border-style: solid;
         border-top-width: 1px;
         border-right-width: 1px;
         border-top-width: 10px;
         border-left-width: 1px;
         border-color: #4B0082;
         text-align: center;
         float: left;
      }
      #topBordrBtnWrap{
         margin-top: 10px;
         float: left;
      }
   </style>
</head>
<body>
   <h3> Set the style of the top border using the <i> borderTopStyle </i>property.</h3>
   <div class = "topBordrEl" id = "topBordrEl1">Top 1</div>
   <div class = "topBordrEl" id = "topBordrEl2">Top 2</div>
   <div class = "topBordrEl" id = "topBordrEl3">Top 3</div>
   <div class = "topBordrEl" id = "topBordrEl4">Top 4</div>
   <br>
   <div id = "topBordrBtnWrap">
      <p> Click on the button to set different styles to the top border. </p>
      <button onclick = "setTopBorderStyle();"> Set </button>
   </div>
   <br>
</body>
   <script>
      function setTopBorderStyle(){
         var topBordrBtnWrap = document.getElementById("topBordrBtnWrap");
         
         // topBordrBtnWrap.style.display = "none";
         var topBordrEl1 = document.getElementById("topBordrEl1");
         var topBordrEl2 = document.getElementById("topBordrEl2");
         var topBordrEl3 = document.getElementById("topBordrEl3");
         var topBordrEl4 = document.getElementById("topBordrEl4");
         topBordrEl1.style.borderTopStyle = "dashed";
         topBordrEl2.style.borderTopStyle = "solid";
         topBordrEl3.style.borderTopStyle = "dotted";
         topBordrEl4.style.borderTopStyle = "double";
         topBordrEl1.innerHTML = "<b> dashed </b>";
         topBordrEl2.innerHTML = "<b> solid </b>";
         topBordrEl3.innerHTML = "<b> dotted </b>";
         topBordrEl4.innerHTML = "<b> double </b>";
      }
   </script>
</html>

示例 3

在此程序中，我们正在为单个 div 元素设置顶部边框样式。我们从用户那里获取顶部边框样式。

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

<html>
<head>
   <style>
      #topBordrUsrEl{
         background-color: #FFFFFF;
         border-style: solid;
         border-width: 5px;
         border-color: #BDB76B;
         text-align: center;
         height: 150px;
         width: 500px;
      }
   </style>
</head>
<body>
   <h3> Set the style of the top border using the <i> borderTopStyle </i> property.</h3>
   <div id = "topBordrUsrEl"> Set the top border style here. </div>
   <br>
   <div id = "topBordrUsrBtnWrap">
      <select id = "topBordrUsrSel" size = "1">
         <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-top style and click on the button. </p>
      <button onclick = "setTopBorderStyle();"> Set </button>
   </div>
   <br>
</body>
   <script>
      function setTopBorderStyle(){
         var topBordrUsrSelTag = document.getElementById("topBordrUsrSel");
         var topBordrUsrSelIndx = topBordrUsrSelTag.selectedIndex;
         var topBordrUsrSelStat = topBordrUsrSelTag.options[topBordrUsrSelIndx].text;
         var topBordrUsrBtnWrap = document.getElementById("topBordrUsrBtnWrap");
         
         // topBordrUsrBtnWrap.style.display = "none";
         var topBordrUsrEl = document.getElementById("topBordrUsrEl");
         topBordrUsrEl.style.borderTopStyle = topBordrUsrSelStat;
         topBordrUsrEl.innerHTML="You have set the top border style to <b>"
         + topBordrUsrEl.style.borderTopStyle + "</b>";
      }
   </script>
</html>

在本教程中，我们学习了 JavaScript 中的 borderTopStyle 属性。borderTopStyle 属性是 JavaScript 中内置的选项，用于设置顶部边框的样式，并且非常易于编写代码。

更新于: 2022年10月12日

257 次浏览

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.