如何使用 JavaScript 设置边框图像区域超出边框框的范围？

在本教程中，我们将学习如何使用 JavaScript 设置边框图像区域超出边框框的数值。要设置边框图像扩展的范围，您需要设置边框外部边缘。为此，我们可以应用 JavaScript 提供的 `borderImageOutset` 样式属性。

为 HTML 元素创建边框图像区域后，我们可能需要增加该区域。通过了解一种将边框图像区域增加到超出边框框的方法，我们可以无需编写冗长的代码即可进行更改。

使用 `borderImageOutset` 属性

`borderImageOutset` 属性允许我们设置边框图像区域扩展的数值。此属性在 CSS 中也用作 “border-image-outset” 属性，并提供类似的输出。

语法

我们将使用 onclick 函数来更改边框图像区域。这需要不同的属性值。我们可以添加一个到四个值。这些值显示在边框图像区域的顶部、右侧、底部和左侧。

如果您只添加一个值，则它将被认为对所有边都相同。如果您添加三个值，则左侧将被视为与右侧相同。

let img = document.getElementById("img");
function(){   
   img.style.borderImageOutset = "1px 2px 1px 2px"; 
}

算法

步骤 1 - 在 HTML 文档中创建一个 div 或标签来设置其边框图像。

步骤 2 - 在 CSS 文件中设置边框图像和宽度。

步骤 3 - 在 HTML 中创建一个按钮，该按钮可用于使用 onclick 函数更改边框图像。

步骤 4 - 使用 `document.getElementById()` 方法为元素设置变量名。

步骤 5 - 为按钮创建函数，并使用 `style.borderImageOutset` 属性设置数值。

示例 1

您可以尝试运行以下代码，学习如何在 JavaScript 中设置边框图像超出边框框的范围。

<!DOCTYPE html> 
<html> 
<head> 
   <style> 
      div{ 
         background-color:gray; 
         border: 40px solid; 
         border-image: url('https://tutorialspoint.com/images/neo4j.png'); 
         border-image-slice: 50; 
         border-image-width: 20px; 
         border-image-width: 1 1 1 1; 
         border-image-outset: 0; 
         border-image-repeat: round; 
      } 
   </style> 
</head> 
<body> 
   <div id="box"> 
      <p>Demo Text!</p> 
   </div> 
   <button onclick = "display()">Set Border Oustside Edges</button> 
   <script> 
      function display(){ 
         document.getElementById("box").style.borderImageOutset =  
         "5px 10px 20px 15px"; 
      } 
   </script> 
</body> 
</html>

示例 2

在这里，我们在 HTML 中创建了一个元素来设置其边框图像。然后，我们在 CSS 中设置其边框和图像规格。在 JavaScript 中，我们使用 `document.getElementById()` 方法访问了该元素。

为了设置边框图像区域扩展的数值，我们在按钮的 onclick 函数中使用了 `style.borderImageOutset` 属性。

<html> 
<head> 
   <style> 
      #boximg{ 
         background-color:gray; 
         border: 30px solid; 
         border-image: url('https://tutorialspoint.com/images/neo4j.png'); 
      } 
   </style> 
</head> 
<body> 
   <h3>Using <i>borderImageOutset"</i> property in JavaScript</h3> 
   <div id = "boximg"> 
   </div> 
   <button onclick = "border()"> Extend Border Image Area </button>  
   <script> 
      let img = document.getElementById("boximg"); 
      function border(){ 
         img.style.borderImageOutset = "2px 2px 70px 5px"; 
      } 
   </script>  
</body> 
</html>

示例 3

使用 if，else 语句与 borderImageOutset 属性

在这个例子中，我们为输入区域创建了一个边框图像。由于每个输入区域都需要不同的长度，您可以使用 `borderImageOutset` 属性和 if 和 else 语句来设置数值，以确保在需要时边框图像区域扩展。

<html> 
<head> 
   <style> 
      #img{ 
         background-color:gray; 
         border: 40px solid; 
         border-image: url('https://tutorialspoint.com/images/neo4j.png'); 
      } 
   </style> 
</head> 
<body> 
   <div id = "img"> 
   <button onclick = "borderinc()"> Extend </button> 
   <script> 
      let img = document.getElementById("img"); 
      function borderinc(){ 
         var num = 20; 
         if(num > 10) { 
            img.style.borderImageOutset = '10px';
         } 
         else { 
            img.style.borderImageOutset = '5px'; 
         }
      } 
   </script> 
</body> 
</html>

上述示例通常用于在 JavaScript 中设置边框图像区域超出边框框的数值。您可以将 `borderImageOutset` 与其他属性一起使用来更改 JavaScript 中元素的样式。

更新于：2022年10月12日

126 次浏览

开启你的职业生涯

完成课程获得认证

开始学习
广告