Incorrect style returned by d3

Is there a reason why d3 is unable to return the correct style value here

it would be d3.select("#fieldset0").style("padding-bottom")

1 Like

Thanks @Fil is there a rule of thumb I can bake in to use in prod elements to utlize ‘-’ for certain styles

I think you’re confusing CSS names and Javascript names, each of which has its own syntax and naming conentions.

D3’s selection.style() method expects a CSS property name. MDN’s CSS reference allows you to browse all of the standard CSS properties. They are all hyphen-separated; none of them are camelCase.

A call to document.querySelector, by contrast, returns a Javascript object, who’s properties are typically camelCase. Thus, you might see something like

obj.paddingBottom

These differences are natural, given that Javascript is a programming language and CSS is designed for style specification. For example, a hyphen in

obj.padding-bottom

would be parsed as a subtraction symbol.

1 Like