如果选中输入，则将 class 应用到 <body>，而不应用 jQuery

Question

我有一个新手问题。我有这个 'hamburger' 菜单：http://alexe.ro/beta/（右上角），如果它被选中，我想在 <body> 中添加一个 class，如果可能的话。

问题是我只想使用 javaScript，而不是 jQuery。如果我知道如何做到这一点，它将对我的（非常有限的）javaScript 知识有所帮助。

这是代码：

<input type="checkbox" class="menuToggle" id="menu-toggle-right" data-toggle="right">

提前致谢。

Answer 1

使用设置属性。

function myfunction() {
  var a = document.getElementsByTagName('body'); 
  a[0].setAttribute("class", "red");
}

.red {
background:red;}

<input type="checkbox" id="ctrl" onChange="myfunction();">

Answer 2

检测是否已在事件处理程序中检查复选框中的 onchange。

在该复选框内，您检查 checked 属性以查看它是否已被选中，然后使用 classList 添加或删除您想要的 class。

document.getElementById('menu-toggle-right').onchange = function() {
    var method = this.checked ? 'add' : 'remove';
    document.body.classList[method]('my-class');
}

body.my-class { background-color:#f44; }

<input type="checkbox" class="menuToggle" id="menu-toggle-right" data-toggle="right">

如果选中输入，则将 class 应用到 <body>，而不应用 jQuery

If input is checked, apply class to <body>, without jQuery

html

javascript

class

input