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

Popular posts from this blog

python - argument must be rect style object - Pygame -

webrtc - Which ICE candidate am I using and why? -

c# - Better 64-bit byte array hash -