HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

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

javascriptweb developmentfront end technology更新于 2024/6/20 6:42:00

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

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

使用 borderStyle 属性

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

语法

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

object.style.borderStyle = style;

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

参数

  • none − 设置无边框。

  • hidden − 类似于"none"。表格元素边框问题所独有。

  • dotted − 设置虚线边框。

  • dashed − 设置虚线边框。

  • solid − 设置实线边框。

  • double − 设置两个边框。总宽度等于边框宽度。

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

  • ridge − 设置 3-D 脊状边框。效果取决于颜色。

  • inset − 设置 3-D 插入边框。效果取决于颜色。

  • outset − 设置 3-D 起始边框。效果取决于颜色。

  • 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 中的内置选项，用于设置元素边框的样式，并且非常易于编码。

相关文章

打印 下一节 ❯❮ 上一节