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

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

我们可以从任何一侧或所有侧为元素应用边框。我们可以自定义任何一侧的边框。边框的每个边缘都有一个特定属性，只能用于该边缘。我们可以提供三个参数（如样式、颜色和宽度）来创建边框。CSS 用于执行此类任务。但是，我们可以通过使用 JavaScript DOM 来实现。

边框有很多类型。有些看起来像直线，有些像波浪线。我们可以使用 JavaScript 在运行时轻松更改边框任何边缘的样式。

因此，让我们看看如何使用 borderRightStyle 属性使用 JavaScript 设置右侧边框的样式。

使用 borderRightStyle 属性

我们可以为边框使用很多样式。它可以吸引用户的注意力并增强网页的外观。我们可以为边框的不同边缘设置不同的样式。我们将设置边框右侧边缘的样式。borderRightStyle 是设置右侧边框样式的属性。

语法

以下是使用 borderRightStyle 属性设置右侧边框样式的语法：

elem.style.borderRightStyle = value

在这里，我们设置了 elem 的右侧边框的样式。我们将 borderRightStyle 设置为 value。

属性值如下：

  • none - 设置无边框（默认值）或删除边框。
  • hidden - 边框存在但隐藏。
  • dotted - 以虚线作为边框。
  • dashed - 以虚线作为边框。
  • solid - 普通实线
  • double - 以双线作为边框
  • groove - 3D 凹槽边框。
  • ridge - 3D 脊状边框
  • inset - 3D 内嵌边框
  • outset - 3D 外凸边框
  • initial - 默认值。
  • inherit - 从父元素继承

示例 1

在本例中，我们创建了一个带有实线边框的 div。单击按钮后，我们执行一个函数并设置边框的样式。我们使用 borderRightStyle 属性来设置右侧边框的样式。双击按钮后，我们的边框将恢复正常。

<html>
<head>
   <style>
      #container{
         width: 70%;
         height: 15%;
         border: 5px solid red;
      }
   </style>
</head>
<body>
   <h3> Use <i> borderRightStyle </i> to set a style of the right border </h3>
   <div id = "container">
      Apply borders here
   </div>
   <br />
   <button id = "btn"> Apply </button>
   <script>
      var btn = document.getElementById("btn");
      var div = document.getElementById("container");
      btn.addEventListener("click", execute);
      function execute(){
         if(div.style.borderRightStyle != "dotted"){
            div.style.borderRightStyle = "dotted";
         }
         else{
            div.style.borderRightStyle = "solid";
         }
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们使用了 borderRightStyle 属性来设置右侧边框样式。

示例 2

在下面的示例中，我们从用户那里获取数字输入。我们在按钮单击时创建几个正方形并将其追加到 div 中。我们在每个正方形上应用了实线样式的边框。我们使用 borderRightStyle 属性来设置右侧边框的样式，并为其应用了点状样式。

<html>
<body>
   <h3> Use <i> borderRightStyle </i> to set a style of the right border </h3>
   <label for = "input_num"> No. of Elements: </label>
   <input type = "number" id = "input_num" value = "0" name = "value"/>
   <br /><br />
   <button id = "btn"> Create Element </button>
   <div id = "div"></div>
   <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", execute);
      function execute(){
         var element_div = document.getElementById("div")
         var input_val = document.getElementById("input_num").value;
         for(i=0 ; i<input_val ; i++){
            var element = document.createElement("p");
            element.style.width = "50px";
            element.style.height = "50px";
            element.style.border = "2px solid red";
            element.style.borderRightStyle = "dotted";
            element.style.margin = "30px";
            element.style.borderRadius = "5px";
            element_div.style.display = "flex";
            element_div.style.flexDirection = "row";
            element_div.appendChild(element);
         }
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们创建了几个等于用户给定输入的正方形。我们使用 borderRightStyle 属性来设置每个正方形右侧边框的样式。我们将正方形的右侧设置为点状样式。

在本教程中，我们学习了如何使用 JavaScript DOM 设置右侧边框的样式。

更新于：2022年10月12日

158 次浏览

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告