Question

我正在使用JavaScript的d3.js库为我的应用程序创建GUI的一部分。我做了一个按钮，它作为按钮工作，但我希望它是一个切换按钮。具体来说，我希望它在单击时更改样式。

出于各种原因，我无法触摸样式表或头部中的css，我只能使用JavaScript。

这就是我创建按钮的方式（文档中有id =＆＃39; menu＆＃39;的div）：

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

如何重新设置按钮的样式？我尝试将d3.select("#buttonCentre").style("background", "#ccc");之类的内容放入on_click函数中，但是d3不识别样式的标准css名称，它使用不同的名称，我找不到列表或等价映射。

Answer 1

使用background-color代替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")
    });

这是一个有效的code

如何使用d3设置Javascript按钮的样式？

1 个答案: