How do I style a Javascript button using d3?

Tags: javascript,css,d3.js

Problem :

I am using the d3.js library for JavaScript to create parts of the GUI for my app. I made a button, and it works as a button, but I want it to be a toggle button. Specifically, I want it to change styles when it is clicked.

For various reasons, I can't touch the css in the stylesheet or the head, I can only use JavaScript.

This is how I am creating the button (there is a div with id = 'menu' in the doc):

var menuDiv = d3.select("#menu");
var menuButton = menuDiv.append("button")
    .text("Button")
    .attr("id", "buttonCentre")
    .classed("Button", true)
    .on('click', function(){
        //Do stuff
    });

How can I re-style the button? I tried putting things like d3.select("#buttonCentre").style("background", "#ccc"); into the on_click function, but d3 doesn't recognize the standard css names for styling, it uses different names, and I can't find a list or an equivalence mapping.

---

Solution :

Use background-color instead of background.

var menuDiv = d3.select("body");
var menuButton = menuDiv.append("button")
    .text("Button")
    .attr("id", "buttonCentre")
    .classed("button", true)
    .on('click', function(){
        //here this is the button
        d3.select(this).style("background-color", "#ccc")
    });

Here is a working code