classList操作类属性
<pre class=“language-html line-numbers”><code class=“language-html”>
<div id=“box” class=“text”>使用classlist属性设置class属性</div>
</code></pre>
使用元素的<code>classList</code>属性可以<code>访问</code>或者<code>添加</code>、<code>删除</code>及<code>修改</code>元素的class属性
<h2>element.classList</h2>
使用<code>classList</code>属性<code>访问class属性</code>
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
let oDiv = document.querySelector(‘#box’);
console.log(oDiv.classList);
// DOMTokenList [“text”, value: “text”]
</code></pre>
<h2>element.classList.add()</h2>
通过<code>classList</code>调用<code>add()</code>的方法可以添加<code>一个</code>或者<code>多个</code>class属性，多个用<code>,</code>隔开
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
// 添加fonts一个class属性
oDiv.classList.add(‘fonts’);
// 同时添加fonts和red两个class属性
oDiv.classList.add(‘fonts’, ‘red’);
</code></pre>
<h2>element.classList.remove()</h2>
<code>remove()</code>移除，<code>移除一个</code>或者<code>多个</code>class属性，多个用<code>,</code>隔开
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
// 删除fonts一个class属性
oDiv.classList.remove(‘fonts’);
// 点击删除fonts和red两个class属性
oDiv.onclick = function() {
this.classList.remove(‘fonts’, ‘red’);
}
</code></pre>
<h2>element.classList.toggle()</h2>
在元素中切换类名。
<code>toggle()</code>中的<code>第一个参数</code>为<code>必须参数</code>，当元素中存在该指定的class属性时，将移除该class属性，反之就添加。
第二个参数为强制添加（参数为true时）或移除（参数为false时）第一个参数指定的class属性。
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
oDiv.classList.add(‘red’);
oDiv.onclick = function() {
// 切换class
this.classList.toggle(‘fonts’);
}
// 强制移除一个class为fonts的属性
oDiv.classList.toggle(“fonts”, false);
// 强制添加一个class为red的属性
oDiv.classList.toggle(“red”, true);
</code></pre>
<h2>element.classList.contains()</h2>
检测元素是否包含某个<code>class</code> 返回<code>布尔值</code>
<pre class=“language-javascript line-numbers”><code class=“language-javascript”>
// 检测元素是否包含类名为 e 的这个属性
let bool = oDiv.classList.contains(‘e’);
console.log(bool);
// false
// 检测元素是否包含类名为 text 的这个属性
let bool = oDiv.classList.contains(‘text’);
console.log(bool);
// true
</code></pre>
<h2>模拟单选</h2>
<pre class=“language-html line-numbers”><code class=“language-html”>
<body>
<div class=“wrap”>
<h2>模拟单选</h2>
<div class=“option”>
<a href=“javascript:;” class=“checked”>男</a>
<a href=“javascript:;”>女</a>
<a href=“javascript:;”>保密</a>
</div>
</div>
<script>
// 通过css选择器获取div中的所有a元素，返回一个类数组
let oBtns = document.querySelectorAll(‘.option a’);
// console.log(oBtns.length);
//
for (let i = 0; i < oBtns.length; i++) {
// console.log(i);
// oBtns获取的是一组a的类数组，既然是伪数组，就可以使用下标去获取某一个值
// 使用循环的数值，从0开始的 i 值，每一次拿到的都是不同的a，不同的添加事件
oBtns[i].onclick = function() {
// 每次点击时先消除其他元素上的class
for (let j = 0; j < oBtns.length; j++) {
oBtns[j].classList.remove('checked');
}
// 然后给点击的元素添加上class
this.classList.add('checked');
}
}
</script>
</body>
</code></pre>
<p><a class=“case-show” href=“https://assets.moshanghua.net/demo/模拟单选框.html” target=“_blank”>DEMO展示</a></p>
<h2>模拟复选</h2>
<pre class=“language-html line-numbers”><code class=“language-html”>
<body>
<div class=“wrap”>
<h2>模拟复选</h2>
<div class=“option”>
<a href=“javascript:;” class=“checked”>油桃</a>
<a href=“javascript:;”>菠萝</a>
<a href=“javascript:;”>葡萄</a>
</div>
</div>
<script>
let oBtns = document.querySelectorAll(‘.option a’);
// console.log(oBtns.length);
for (let i = 0; i < oBtns.length; i++) {
oBtns[i].onclick = function() {
this.classList.toggle('checked');
}
}
</script>
</body>
</code></pre>
<p><a class=“case-show” href=“https://assets.moshanghua.net/demo/模拟复选框.html” target=“_blank”>DEMO展示</a></p>