Javascript 更改隐藏/显示画布上的按钮属性

在学习的过程中，我不断回顾我所做的工作，以便正确地理解它，做出改变和改进。目前，我正在检查隐藏/显示功能

我有3个按钮控制各自画布的可见性。 我的代码确实是这样的：

    function toggleRedDot(){
        document.getElementById('btnRed').click(); {
            if(canvas.style.visibility=='hidden'){
                canvas.style.visibility='visible';
                btnRed.style.color='Red';
            }else{
                canvas.style.visibility='hidden';
                btnRed.style.color='Black';
            }
        }
    };

除按钮颜色外，绿色和蓝色切换功能完全相同。我的项目实际上有7个按钮和画布。我试图将所有这些函数都放在1中，这就是我现在得到的：

    function toggle_visibility(id) 
    {
        var ele = document.getElementById(id);
        if (ele.style.visibility == 'hidden')
        {
            ele.style.visibility = 'visible';
        }
        else 
        {
            ele.style.visibility = 'hidden';                
        }
    }

我无法确定现在如何更改相应的按钮颜色属性。其想法是，当画布可见时，按钮将显示为“打开”，当“关闭”时，颜色将恢复为黑色

我还需要答案是在只是javascript请，因为这是我正在学习。 我也希望对drawDots函数做类似的事情，因为它们在类和位置上也不同。多谢各位

我做了一个片段：

var canvas=document.getElementById（'redDot'）；
var ctxR=canvas.getContext（'2d'）；
var canvas1=document.getElementById（'greenDot'）；
var ctxG=canvas1.getContext（'2d'）；
var canvas2=document.getElementById（'blueDot'）；
var ctxB=canvas2.getContext（'2d'）；
var cw=画布宽度；
var ch=画布高度；
drawDots（）；
功能切换\u可见性（id）{
var ele=document.getElementById（id）；
如果（ele.style.visibility=='hidden'）{
ele.style.visibility='visible'；
}否则{
ele.style.visibility='hidden'；
}
}
函数drawDots（）{
//红点
ctxR.clearRect（0，0，cw，ch）；
ctxR.save（）；
翻译（cw/2，ch/2）；
ctxR.beginPath（）；
ctxR.arc（-50,0,10,0,2*Math.PI）；
ctxR.closePath（）；
ctxR.fillStyle='Red'；
ctxR.fill（）；
ctxR.restore（）；
//绿点
ctxG.clearRect（0，0，cw，ch）；
ctxG.save（）；
ctxG.翻译（cw/2，ch/2）；
ctxG.beginPath（）；
ctxG.arc（0,0,10,0,2*Math.PI）；
ctxG.closePath（）；
ctxG.fillStyle=‘绿色’；
ctxG.fill（）；
ctxG.restore（）；
//蓝点
ctxB.clearRect（0，0，cw，ch）；
ctxB.save（）；
ctxB.翻译（cw/2，ch/2）；
ctxB.beginPath（）；
ctxB.arc（50,0,10,0,2*Math.PI）；
ctxB.closePath（）；
ctxB.fillStyle='蓝色'；
ctxB.fill（）；
ctxB.restore（）；
};
#包装器{
位置：相对位置；
}
帆布{
位置：绝对位置；
边框：1px纯红；
}
瑞德先生{
颜色：红色；
}
格林先生{
颜色：绿色；
}
蓝先生{
颜色：蓝色；
}

☉
☉
☉
有多种方法可以实现这一点。我选择的方式只是将按钮的id和画布的id一起传递到
toggle\u visibility
。我还添加了一个小对象，以便可以通过按钮id查找按钮的颜色

<>将来要考虑的事情：


因为DOM读/写有点贵，考虑读取DOM一次，并将元素存储在JS端
考虑使用JS中的
addEventListener
，而不是HTML中的
onclick

您的标记将更清晰
您不必传递像
btnRed
和
redDot
这样的参数，因为事件侦听器接收到一个事件，该事件知道哪个元素触发了该事件

与其直接在JS中操纵可见性/颜色，不如使用一个CSS类（或多个类）来做您想要做的事情，只需更改类即可

祝你好运！：）


var canvas=document.getElementById（'redDot'）；
var ctxR=canvas.getContext（'2d'）；
var canvas1=document.getElementById（'greenDot'）；
var ctxG=canvas1.getContext（'2d'）；
var canvas2=document.getElementById（'blueDot'）；
var ctxB=canvas2.getContext（'2d'）；
var cw=画布宽度；
var ch=画布高度；
drawDots（）；
var按钮颜色={
btnRed:'红色'，
绿色：“绿色”，
蓝色：“蓝色”
};
功能切换\u可见性（buttonId、dotId）{
var button=document.getElementById（buttonId）
var dot=document.getElementById（dotId）；
如果（dot.style.visibility==“隐藏”）{
dot.style.visibility='visible'；
button.style.color=buttonId颜色[buttonId]；
}否则{
dot.style.visibility='hidden'；
button.style.color='black'；
}
}
函数drawDots（）{
//红点
ctxR.clearRect（0，0，cw，ch）；
ctxR.save（）；
翻译（cw/2，ch/2）；
ctxR.beginPath（）；
ctxR.arc（-50,0,10,0,2*Math.PI）；
ctxR.closePath（）；
ctxR.fillStyle='Red'；
ctxR.fill（）；
ctxR.restore（）；
//绿点
ctxG.clearRect（0，0，cw，ch）；
ctxG.save（）；
ctxG.翻译（cw/2，ch/2）；
ctxG.beginPath（）；
ctxG.arc（0,0,10,0,2*Math.PI）；
ctxG.closePath（）；
ctxG.fillStyle=‘绿色’；
ctxG.fill（）；
ctxG.restore（）；
//蓝点
ctxB.clearRect（0，0，cw，ch）；
ctxB.save（）；
ctxB.翻译（cw/2，ch/2）；
ctxB.beginPath（）；
ctxB.arc（50,0,10,0,2*Math.PI）；
ctxB.closePath（）；
ctxB.fillStyle='蓝色'；
ctxB.fill（）；
ctxB.restore（）；
};
#包装器{
位置：相对位置；
}
帆布{
位置：绝对位置；
边框：1px纯红；
}
瑞德先生{
颜色：红色；
}
格林先生{
颜色：绿色；
}
蓝先生{
颜色：蓝色；
}

☉
☉
☉
有多种方法可以实现这一点。我选择的方式只是将按钮的id和画布的id一起传递到
toggle\u visibility
。我还添加了一个小对象，以便可以通过按钮id查找按钮的颜色

<>将来要考虑的事情：


因为DOM读/写有点贵，考虑读取DOM一次，并将元素存储在JS端
考虑使用JS中的
addEventListener
，而不是HTML中的
onclick

您的标记将更清晰
您不必传递像
btnRed
和
redDot
这样的参数，因为事件侦听器