使用 JavaScript 更改 CSS3 边框属性

change css3 border properties using javascript

本文关键字：边框 属性 CSS3 更改 JavaScript 使用      更新时间：2023-09-26
div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

我想使用 JavaScript dom 来标记我的div 标签的边框图像

提前致谢 

$('div').css({
  "border-image"           :  "url(border.png) 30 30 round",
  "-moz-border-image"      :  "url(border.png) 30 30 round",
  "-webkit-border-image"   :  "url(border.png) 30 30 round",
  "-o-border-image"        :  "url(border.png) 30 30 round"
});

我想使用 JavaScript dom 来标记我的div 标签的边框图像

你可以这样做：

var dv = document.getElementById('#divID');
dv.style.borderImage = 'url(border.png) 30 30 round';
dv.style.MozBorderImage = 'url(border.png) 30 30 round';
dv.style.WebkitBorderImage = 'url(border.png) 30 30 round';
dv.style.OBorderImage = 'url(border.png) 30 30 round';

如果要对所有 DIV 执行操作：

var dvs = document.getElementsByTagName('div');
for (var i = 0; i < dvs.length; i++) {
    dvs[i].style.borderImage = 'url(border.png) 30 30 round';
    dvs[i].style.MozBorderImage = 'url(border.png) 30 30 round';
    dvs[i].style.WebkitBorderImage = 'url(border.png) 30 30 round';
    dvs[i].style.OBorderImage = 'url(border.png) 30 30 round';
}
相关文章：