数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 设置图像边框的宽度？
在本教程中，我们将学习如何使用 JavaScript 设置图像边框的宽度。要设置图像边框的宽度，请在 JavaScript 中使用 borderImageWidth 属性。
当我们需要将图像作为网页内容的边框时，我们必须了解如何设置图像边框的宽度。
让我们简要讨论一下实现此目标的选项。
使用 Style borderImageWidth 属性
使用 Style borderImageWidth 属性，我们可以设置或返回元素的图像边框宽度。
当图像边框宽度大于边框宽度时，图像边框将超出填充。
我们可以为 borderImageWidth 属性设置一个、两个、三个或四个值。
如果只有一个值，则应用于所有四边。
如果有两个值，则第一个值设置“顶部和底部”，第二个值设置“左侧”和“右侧”。
如果有三个值，则第一个值设置顶部，第二个值设置“左侧”和“右侧”，第三个值设置底部。
如果有四个值，则顶部、右侧、底部和左侧按顺序分别取相应的值。
语法
用户可以按照以下语法使用此属性：
object.style.borderImageWidth = "length|number|%|auto|initial|inherit";
使用上述语法，我们可以将所需的图像边框宽度设置为元素的样式。
参数
length − 以像素为单位的长度单位，定义边框宽度的尺寸。
number − 定义对应边框宽度的倍数。
% − 定义图像边框宽度对于水平偏移量的大小，以及对于垂直偏移量的高度。
auto − 宽度是相应图像的内在宽度或高度。
initial − 将此属性设置为其默认值。
inherit − 从其父元素继承此属性。
给定属性的默认值为 1。返回值是表示图像边框宽度的字符串。
示例 1
在下面的示例中，我们使用 borderImageWidth 属性设置图像边框的宽度。您可以尝试运行以下代码，了解如何将边框设置为图像：
<!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 Width</button> <script> function display(){ document.getElementById("box").style.borderImageWidth = "20px 30px"; } </script> </body> </html>
示例 2
在此程序中，我们将图像边框宽度设置为 div 元素。我们从用户那里获取图像边框宽度。
当用户点击按钮时，我们调用函数根据上面给出的语法设置图像边框宽度。
<html> <head> <style> #imgBrdrWdthUsrEl { border: 15px solid transparent; padding: 10px; border-image-source: url(https://tutorialspoint.com/css/images/border.png); border-image-repeat: round; border-image-slice: 20; border-image-width: 20px; } </style> <script> function setImageBorderWidth() { var imgBrdrWdthUsrSelTag = document.getElementById("imgBrdrWdthUsrSel"); var imgBrdrWdthUsrSelIndx = imgBrdrWdthUsrSelTag.selectedIndex; var imgBrdrWdthUsrSelStat = imgBrdrWdthUsrSelTag.options[imgBrdrWdthUsrSelIndx].text; var imgBrdrWdthUsrBtnWrap = document.getElementById("imgBrdrWdthUsrBtnWrap"); var imgBrdrWdthUsrEl = document.getElementById("imgBrdrWdthUsrEl"); imgBrdrWdthUsrEl.style.borderImageWidth = imgBrdrWdthUsrSelStat; imgBrdrWdthUsrEl.innerHTML = "You have set the image border width to <b>" + imgBrdrWdthUsrEl.style.borderImageWidth + "</b>"; } </script> </head> <body> <h2>Set the widths of the image border using the <i> borderImageWidth </i>property.</h2> <p id = "imgBrdrWdthUsrEl"> Image border. </p> <br> <div id = "imgBrdrWdthUsrBtnWrap"> <select id = "imgBrdrWdthUsrSel"> <option/> 5px <option/> 5px 10px; <option selected = "selected"/> 5px 10px 15px <option/> 5px 10px 15px 20px <option/> 5 10 15 20 <option/> 1% 2% 3% 4% <option/> auto <option/> initial <option/> inherit </select> <br><br> <p> Choose the image border width and click on the button. </p> <button onclick = "setImageBorderWidth();"> Change </button> </div> <br> </body> </html>
示例 3
在此示例中，我们在段落标签上设置了不同的图像边框宽度。当用户点击按钮时，我们将初始化函数来设置图像边框宽度。
<html> <head> <style> #imgBrdr1{ border: 10px solid #000000; padding: 20px; border-image: url("https://tutorialspoint.com/images/neo4j.png"); border-image-slice: 10%; border-image-repeat: round; border-image-width: 0px; background-color: lavender; } #imgBrdr2{ border: 10px solid #000000; padding: 20px; border-image: url("https://tutorialspoint.com/images/neo4j.png"); border-image-slice: 10%; border-image-repeat: round; border-image-width: 0; background-color: pink; } #imgBrdr3{ border: 10px solid #000000; padding: 20px; border-image: url("https://tutorialspoint.com/images/neo4j.png"); border-image-slice: 10%; border-image-repeat: round; border-image-width: 0; background-color: lavender; } #imgBrdr4{ border: 10px solid #000000; padding: 20px; border-image: url("https://tutorialspoint.com/images/neo4j.png"); border-image-slice: 10%; border-image-repeat: round; border-image-width: 0; background-color: pink; } </style> <script> function setMultImageBorderWidth(){ var imgBrdrWdthBtnWrap = document.getElementById("imgBrdrWdthBtnWrap"); var imgBrdrWdthEl1 = document.getElementById("imgBrdr1"); imgBrdrWdthEl1.style.borderImageWidth = "7px"; imgBrdrWdthEl1.innerHTML = "border-image-width - <b>" + imgBrdrWdthEl1.style.borderImageWidth + "</b>"; var imgBrdrWdthEl2 = document.getElementById("imgBrdr2"); imgBrdrWdthEl2.style.borderImageWidth = "8px"; imgBrdrWdthEl2.innerHTML = "border-image-width - <b>" + imgBrdrWdthEl2.style.borderImageWidth + "</b>"; var imgBrdrWdthEl3 = document.getElementById("imgBrdr3"); imgBrdrWdthEl3.style.borderImageWidth = "9px"; imgBrdrWdthEl3.innerHTML = "border-image-width - <b>" + imgBrdrWdthEl3.style.borderImageWidth + "</b>"; var imgBrdrWdthEl4 = document.getElementById("imgBrdr4"); imgBrdrWdthEl4.style.borderImageWidth = "10px"; imgBrdrWdthEl4.innerHTML = "border-image-width - <b>" + imgBrdrWdthEl4.style.borderImageWidth + "</b>"; } </script> </head> <body> <h3> Set the widths of multiple image borders using the <i> borderImageWidth </i>property. </h3> <p id = "imgBrdr1"> </p> <p id = "imgBrdr2"> </p> <p id = "imgBrdr3"> </p> <p id = "imgBrdr4"> </p> <div id = "imgBrdrWdthBtnWrap"> <p> Click on the button to view different border image widths on the color boxes </p> <button onclick = "setMultImageBorderWidth();"> View </button> </div> </body> </html>
在本教程中，我们了解了 JavaScript 中的 borderImageWidth 属性。此属性是 JavaScript 中一个内置选项，用于设置图像边框的宽度，并且非常易于编码。
更新于： 2022-10-25
363 次浏览
广告