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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.