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

标签 javascript css svg d3.js

全部:

我使用 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才有效)。我想知道是否有人可以帮助实现按类更改样式?

谢谢

最佳答案

内联样式优先于 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 规则。

关于javascript - 如何通过在 D3 中应用新类来覆盖内联样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29901628/

相关文章:

c# - Selenium C# 无法使用 FindElements 获取列表

javascript - react-select 打开的选项 float css

javascript - projection([lat,lng]) 不断返回 null

javascript - 使用 Promises 迭代删除 IndexedDb 中的项目

javascript - 如何使用回车键触发 <a href> ?

javascript - 无限期地重复一个函数,最好不使用 setInterval()

html - 移动网页..隐藏在智能手机控件后面的部分页面

jquery - SVG 工具提示隐藏/显示

SVG 阴影被剪裁

javascript - 引导日期时间选择器 : can't select "tomorrow" as date