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

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

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

使用 borderImageOutset 属性

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

语法

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

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

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 次查看

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告