如何使用 JavaScript 设置图像边框是否应该重复、圆角或拉伸？

本教程将教我们如何使用 JavaScript 设置图像边框是否应该重复、圆角或拉伸。使用 borderImageRepeat 属性来设置图像边框是否应重复、圆角或拉伸。

边框用于装饰或突出显示元素。您可以定义其宽度、颜色和边框类型。可以将各种样式应用于边框。但是，这些边框没有任何特殊效果或其他设计。

使用border-image属性，我们可以将图像设置为元素的边框。它不像一条线。它将是我们选择作为边框的图像。border-image 是一个 CSS 属性，它将图像设置为边框。这也可以使用 JavaScript DOM 的 borderImage 样式属性来完成。

还有多个属性可以设置图像边框的样式。您可以使用名为 borderImageRepeat 属性的 JavaScript 样式，使图像边框重复、圆角或拉伸。

因此，让我们看看如何使用 JavaScript 设置图像边框是否应该重复、圆角或拉伸。

以下是我们可以使用来设置图像边框是否应该重复、圆角或拉伸的属性：

  • 使用 borderImageRepeat 属性
  • 使用 borderImage 属性

使用 DOM 的 borderImageRepeat 属性

有不同尺寸的不同图像。因此，它们不会适合边框的宽度。使用的 borderImageRepeat 用于设置边框图像应该重复、圆角或拉伸。使用此属性，我们可以定义图像是否可以重复或通过拉伸填充整个区域。

用户可以按照以下语法使用 JavaScript 设置图像边框重复。

语法

var element = document.getElementById(" <Id here> ");
element.style.borderImageRepeat = "stretch|repeat|round|initial | inherit"

您可以按照上述语法设置 borderImageRepeat 属性。

参数

  • stretch - 拉伸图像以填充整个边框区域。
  • repeat - 对所有可用空间重复图像。
  • round - 重复图像并调整图像大小以填充区域。
  • initial - 设置为默认值。
  • inherit - 从其父元素继承。

示例

在以下示例中，我们使用了 borderImageRepeat 属性将图像添加为元素的边框。我们使用了 round 值来填充图像并重新缩放它。

<!DOCTYPE html>
<html>
<head>
   <style>
      div{
         background-color: blue;
         border: 30px solid;
         border-image:
         url('https://tutorialspoint.com/html5/images/html5-mini-logo.jpg');
         border-image-slice: 10 10 30 30;
         border-image-width: 1 1 1 1;
         border-image-repeat: stretch;
      }
   </style>
</head>
<body>
   <div id="box">
      <p>
      Demo Text!
      </p>
      <p>
      Demo Text!
      </p>
      <p>
      Demo Text!
      </p>
   </div>
   <button onclick="display()">Click me!</button>
   <script>
      function display() {
         document.getElementById("box").style.borderImageRepeat =
         "round";
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们使用了 borderImageRepeat 属性使用 JavaScript 将图像设置为元素的边框。

使用 DOM 的 borderImage 属性

我们将声明一个带宽度的边框，然后图像将添加到边框的宽度内。但是，图像的尺寸不同，因此它们不会精确地适合边框。我们可以使其保持原始大小，将其拉伸以使其适合，或者重复它直到适合边框。

borderImage 属性是一个简写属性，用于使用图像边框并设置其样式。它包含诸如图像源、图像宽度、图像边框的偏移量和图像的重复等属性。

我们可以使用 borderImage 属性将图像设置为边框。用户可以按照以下语法在 JavaScript 中使用 borderImage 属性。

语法

var element = document.getElementById("<Element id here>");
element.style.border = " <Enter values> ";
element.style.borderImage = " <Image_source> <border_slice>
<border_width> <border_outset> <repeat||initial||inherit>";

按照上述语法，您可以使用 JavaScript 将图像设置为边框。

参数

  • Image_source - 图像源
  • border_slice - 图像边框的内部偏移量
  • border_width - 图像边框的宽度
  • border_outset - 图像边框的外部偏移量
  • repeat - 重复图像、拉伸图像或圆角图像
  • initial - 设置为属性的默认值
  • inherit - 从其父元素继承属性的值

示例

在本例中，我们从用户那里获取 URL 和重复值作为输入。用户可以使用任何图像的 URL 将其显示为边框，并选择重复属性的任何值。单击按钮后，URL 的图像将作为下方容器的边框添加。

<html>
<body id = "body">
   <h3> Use <i> borderImage </i> property to set the border image repeat
   </h3>
   <label for = "url"> Enter Image URL </label>
   <input type = "text" id = "url" value = "" name = "URL"/> <br>
   <label> Select Repeat behaviour </label>
   <select id = "repeat_select">
      <option value = "stretch"> stretch
      </option>
      <option value = "repeat"> repeat
      </option>
      <option value = "round"> round
      </option>
   </select>
   <br>
   <button id = "btn">Submit</button>
   <div id = "container">
      This is a container
   </div>
   <script>
      var div = document.getElementById("container");
      div.style.width = "30%";
      div.style.height = "30%";
      div.style.border = "20px solid black";
      div.style.margin = "10px";
      div.style.textAlign = "center";
      document.getElementById("btn").addEventListener("click", execute);
      function execute(){
      var selectElement = document.querySelector('#repeat_select');
         var selected = selectElement.value;
         var URL = document.getElementById("url").value;
         div.style.borderImage = "url("+URL+")" + " 50 50 " + selected;
      }
   </script>
</body>
</html>

在上面的示例中，用户可以看到我们正在添加一个图像作为边框，并为图像设置重复行为。我们使用了 borderImage 属性来设置图像的重复行为。

在本教程中，我们学习了如何使用 JavaScript 设置图像边框是否应该重复、圆角或拉伸。

更新于： 2022-10-26

113 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告