javascript - 使用按钮更改wordpress中的背景颜色

Question

我目前正在尝试在 WordPress 上设计一个页面，我想在其中实现夜间模式。

基本上，当您按下一个按钮(图像)时，背景颜色将从白色变为黑色(稍后，文本颜色也是如此)。

因为 WordPress，我必须使用内联 css 和 JavaScript。现在，我正在尝试这段代码:

<script type="text/javascript">
var activated = 0; 
function changeBgCol() 
{ 
    if (activated == 0) 
    { 
         document.body.style.backgroundColor = "black"; 
         document.body.style.color = "white"; 
         activated = 1; 
     } 
     else 
     {  
         document.body.style.backgroundColor = "white"; 
         document.body.style.color = "black"; 
         activated = 0; 
     } 
}
</script>

和按钮(图片):

<a><img class="alignnone size-medium wp-image-2591" onclick="javascript:changeBgColor()" src="https://www.[WEBSITE].se/main/wp-content/uploads/2013/11/[PICTURE]-300x300.png"  width="480" height="480" /></a>

但是当我测试时，图像不可点击，背景颜色也没有改变。

可能是什么问题？

最好的问候

Answer 1

最好的方法是在主体上切换一个类。

$('.yourbutton').on('click', function(){
    $('body').toggleClass('theme--dark');
});

然后添加相应的CSS即可。

.theme--dark {
    background-color: #111;
}