javascript - 如何更改属性值的一部分

Question

我有点棘手。我正在尝试仅更改分配给样式的字符串的一部分。我想用js把两个梯度子句中的50%改成不同的值，而不必在js中创建整个字符串。

是否有某种正则表达式交换与setAttribute？

<a class="item" id="bob" style="
background-image:-moz-linear-gradient(0deg, rgb(0, 255, 0) 0%, rgb(250, 250, 5) 50%, rgb(252, 3, 3) 100%);
background-image:-webkit-linear-gradient(0deg, rgb(0, 255, 0) 0%, rgb(250, 250, 5) 50%, rgb(252, 3, 3) 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00',endColorstr='#fc0303',GradientType=1);">MYtext</a>

Answer 1

该style属性是一个对象，而不是一个字符串。因此，您必须执行以下操作：

var bob = document.getElementById('bob');

var background = bob.style.backgroundImage;

if (background) {
    bob.style.backgroundImage = background.replace('50%','70%');
}

如果您愿意，也可以setAttribute在style对象上使用：

bob.style.setAttribute('backgroundImage' ...

但setAttribute在处理style对象时不能在 IE 上可靠地工作（或工作方式不同）。只需使用更短且更可靠的对象访问语法：

bob.style.backgroundImage = ...

---

见：http ://www.quirksmode.org/dom/w3c_core.html

Answer 2

啊！

var el = document.getElementById('bob');
el.setAttribute('style', el.getAttribute('style').replace('50%', '30%'));

但这会更好：

var el = document.getElementById('bob');
el.style.backgroundImage = el.style.backgroundImage.replace(/50%/g, '30%');