簡體   English   中英

使用按鈕更改Wordpress中的背景顏色

[英]Changing background color in wordpress with a button

我目前正在嘗試在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>

但是,當我對其進行測試時,該圖像不可單擊,並且背景顏色不會改變。

可能是什么問題?

最好的祝福

最好的方法是在身體上切換一個類。

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

然后只需添加相應的CSS。

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

您已將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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM