![](/img/trans.png)
[英]Changing the background color and the main content background in 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.