HTML DOM 样式 borderImageWidth 属性

htmldomweb developmentfront end technology更新于 2024/3/9 18:52:17

HTML DOM 样式 borderImageWidth 属性用于设置或获取元素边框图像的宽度。

以下是语法 −

设置 borderImageWidth 属性 −

object.style.borderImageWidth = "number|%|auto|initial|inherit"

以上属性解释如下 −

值	描述
length	用于描述边框宽度大小(以像素为单位)。
number	用于描述边框宽度的倍数，默认值为 1。
%	用于描述边框图像区域宽度的水平偏移量和垂直偏移量。
auto	设置与图像宽度和高度对应的宽度和高度。
initial	用于设置将此属性设置为默认值。
inherit	继承父级属性值。

让我们看一个 borderImageWidth 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1 {
      width: 400px;
      padding: 25px;
      border-style: solid;
      border-color: transparent;
      border-image-slice: 30;
      border-image-source: url("https://www.cainiaomax.com/ethereum/images/ethereum-mini-            logo.jpg");
      border-image-width: 10px;
}
</style>
<script>
   function changeBorderWidth(){
      document.getElementById("DIV1").style.borderImageWidth="30px";
      document.getElementById("Sample").innerHTML="The border image width is now increased";
}
</script>
</head>
<body>
<div id="DIV1">HELLO</div>
<p>Increase the above div border image width by clicking the below button</p>
<button onclick="changeBorderWidth()">Change Border Width</button>
<p id="Sample"></p>
</body>
</html>