javascript - 如何通过在 D3 中应用新类来覆盖内联样式

Question

全部:

我使用 D3 为 SVG 元素添加样式，例如:

svg.append("rect")
   .attr("id", "testclass")
   .classed("hascolor", true)
   .style("fill", "red");

然后我定义另一个类:

.nocolor{
    fill: transparent;
}

当我想应用这个类来改变样式时:

svg.select("#testclass")
   .classed("nocolor", true);

RECT的class变了，但是style没有应用(只有我用JS直接改变style才有效)。我想知道是否有人可以帮助实现按类更改样式？

谢谢

Answer 1

内联样式优先于 css 样式。

(我知道这部分代码可能不适用于您的情况，而只是用于示范性建议)。 这是一个 Jquery 示例，您可以测试内联样式的样式优先级，第一类应用规则，第二类应用带有 !important 的规则。

HTML:

 <div id='theOne' style="color: green;" class="colorRed"> Something that needs to be colored </div>

CSS:

.colorRed {
    color: red;
}
.colorBlack {
    color: black!important;
}

J查询:

$('#theOne').addClass('colorBlack');

Fiddle

您的问题可能的解决方案是:

1) 添加规则 fill: transparent as 'style' 属性。

2) 在第一步中使用 css 类而不是属性样式。

3) 添加 !important 到 css 规则。