javascript - Why does my inline style not work CSS -
i'm pretty new @ this. can't figure out why "css" fill overrides "inline" fill.
#label_x, #label_y { font-size: 130% !important; } rect { fill: #4aaeea; } #chart text { fill: black; font: 10px sans-serif; text-anchor: end; } .axis text { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #aaa; shape-rendering: crispedges; } body { background: #fff; color: #eaeaea; padding: 10px; } .ch2 { fill: #e50000; }
... bunch of (d3) javascript:
bar.append("rect") .attr("y", function(d) { return yscale(d.with_mobile_all); }) .attr("x", function(d, i) { return xscale.rangeband() + (padding) / 2.2; //+ x.rangeband() / 2 + (padding/2 + (i+1)*0.1) ; }) .attr("height", function(d) { return h - yscale(d.with_mobile_all) + top_padding; }) .attr("width", xscale.rangeband()) //set width base on range on ordinal data .on("mouseover", function() { d3.select(this) .attr("fill", "orange") });
i inspected tags , shows:
<rect y="88.19999999999999" x="39.18181818181818" height="336.8" width="21" fill="orange"></rect>
but shows (in css inspector) line through orange fill has been overridden 'rect' style in css above. idea why happening?
thanks in advance.
you need use inline style
attribute instead of plain fill
:
<rect y="88.19999999999999" x="39.18181818181818" height="336.8" width="21" style="fill: orange;"></rect>
since fill
attribute not considered css value, css in external files override value.
if want orange persist can set !important
rule after orange
. however, since has highest priority, shouldn't needed.
Comments
Post a Comment