Question

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

基本上，当您按下按钮（图像）时，背景颜色将从白色变为黑色（稍后会变为文本颜色）。

由于WordPress，我必须使用inline-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;
}

Answer 2

您将onClick事件设置为changeBgColor，并将JavaScript中的函数设置为changeBgCol。每当遇到使脚本工作的问题时，请务必检查开发人员控制台。试试这个：

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

<script>
    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>

使用内联脚本通常不被视为最佳做法。您可能希望尝试这样的事情，而不是前进：https://jsfiddle.net/eL46ch5y/或使用jQuery。

用word按钮改变wordpress中的背景颜色

2 个答案: