Dynamic CSS value

Question

我们的应用程序中使用了许多内联样式。我正在努力摆脱它们，因为它们容易受到XSS攻击。虽然我已经能够用CSS类替换其中的大多数，但很少有像下面这样的类可以根据var=backgroundColor 的值动态设置样式值

<c:choose>
<c:when test="${order.isDisabled()}">
<c:set var="backgroundColor" value="#f0f0f0"/>
</c:when>
<c:when test="${empty order.isConfirmed}">
<c:set var="backgroundColor" value="transparent"/>
</c:when>
<c:otherwise>
<c:set var="backgroundColor">${record.statusBGColor}</c:set>
</c:otherwise>
</c:choose>
<reg class="reg">
<rect width="100%" height="100%" style="fill:${backgroundColor};"></rect>
</reg>
</div>

有没有任何方法可以创建一个动态获取值(${backgroundColor(的css类，或者其他可以删除内联样式的方法？

我们在应用程序中使用jquery

Answer 1

如果你只是想删除rect的内联填充样式，你可以在js中这样做：

var element = document.getElementsByTagName("rect");
for(var i = 0; i < element.length; i++)
{
element[i].style.removeProperty('fill');
}

或者，如果您想使用jquery删除所有内联样式，这是一个有用的命令：

$('rect').removeAttr('style');

或者，如果你真的想在所有东西上使用所有内联样式，那么有这样一个：

$('*').removeAttr('style');