如何使用切换按钮使用JavaScript更改HTML视图

Question

我想使用一个切换按钮来充当类似于DARK/LIGHT模式功能的功能。但是，在我的情况下，我希望它在不刷新页面的情况下更改HTML视图。

<div class='container'>
<h1 class='headertekst'>".$outlet." - ".$monthName." ".$choosen_date_year." Theoritical: </h1>
<label class='switch' for='view'>
<input type='checkbox' name='view' id='view' checked onclick='view()' >
<span class='slider round'>
</span>
</label>
</div>

一旦点击，我想让它回显不同的HTML代码

function view() {
if (document.getElementById('view').checked) 
{
//echo my HTML codes
} else {
//echo another set of HTML codes
}
}

Answer 1

我不知道你的意思，但请尝试使用document.boy.innerHTML属性来更改正文html。如果你有其他意思，请通知我

Answer 2

您可以像这样更改html主体的颜色：

function view() {
if (document.getElementById('view').checked) 
{
document.body.style.backgroundColor =  'black';
} else {
document.body.style.backgroundColor =  'white';
}
}