javascript - 使用 javascript 更改 css3 边框属性

Question

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 标签的边框图像

提前致谢

Answer 1

$('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"
});

Answer 2

我想使用 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';
}