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

c# - Better 64-bit byte array hash -

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

php - Zend Framework / Skeleton-Application / Composer install issue -