HTML DOM 样式 borderImageSource 属性
htmldomweb developmentfront end technology更新于 2024/3/9 18:20:17
HTML DOM borderImageSource 属性用于设置或返回用作元素边框图像的图像来源。
以下是语法 −
设置 borderImageSource 属性 −
object.style.borderImageSource = "none|image|initial|inherit"
以上属性的解释如下 −
| 值 | 描述 |
|---|---|
| None | 这意味着不使用任何图像。如果指定了边框样式，则会应用它们。 |
| Image | 用于指定用作边框的图像路径。 用作边框的图像路径 |
| ill | 用于保留边框图像的中间部分。 |
| Initial | 用于将此属性设置为默认值。 |
| Inherit | 继承父级属性值。 |
让我们看一个 borderImageSource 属性的示例 −
示例
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url("https://www.cainiaomax.com/asp.net/images/asp.net-mini-logo.jpg");
border-image-slice: 30;
}
</style>
<script>
function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url('http://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="The border image is now changed";
}
</script>
</head>
<body>
<div id="DIV1">This is some sample text inside div</div>
<p>Change the above div border image by clicking the below button</p>
<button onclick="changeBorderImage()">Change Border Image</button>
<p id="Sample"></p>
</body>
</html>
输出
点击"更改边框图像"按钮 −
在上面的例子中 −
我们创建了一个 id 为 “DIV1” 的 div，并应用了相应的 CSS 样式，其中包含一些文本。我们使用 CSS 样式中的 border-image-source 属性指定了边框图像，并将图像 URL 指定为属性值 −
#DIV1 {
width: 400px;
margin: 15px;
padding: 10px;
border: 20px solid transparent;
border-image-source: url(<https://www.cainiaomax.com/asp.net/images/asp.net-mini-logo.jpg ");
border-image-slice: 30;
}
<div id="DIV1">This is some sample text inside div</div>
然后我们创建了一个按钮"更改边框图像"，当用户点击该按钮时，它将执行 changeBorderImage() 方法 −
<button onclick="changeBorderImage()">更改边框图像</button>
changeBorderImage() 使用 getElementById() 方法获取 DIV1 元素，并获取其 borderImageSource 属性值。然后，通过在 url 方法中赋值 url 值，为其分配图片 url。之后，它使用 innerHTML 属性在 id 为"Sample"的段落中显示指示此更改的预期消息。 −
function changeBorderImage(){
document.getElementById("DIV1").style.borderImageSource="url(''http://www.tutorialspoint.com/images/Swift.png?auto=compress&cs=tinysrgb&dpr=1&w=500')";
document.getElementById("Sample").innerHTML="The border image is now changed";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
