JavaScript toggle()

小灰灰 2020-06-02 13:57 429阅读 0赞

# JavaScript toggle()

toggle() 是 HTML5 新增，本文将通过代码实例分步详细介绍一下它的用法。

此方法属于 DOMTokenList 类型集合对象，用于切换 class 样式类的删除与添加。

元素的 classList 属性返回值即是 DOMTokenList 类型。

语法结构：

```html
toggle(class, bool)
```

参数解析：

（1）.class：必需，class样式类名。

（2）.bool：可选，一个布尔值，规定执行删除操作还是添加操作，如果为true，则执行添加操作，无论是否元素当前是否具有指定的样式类，如果为false，则执行删除操作，无论是否元素具有指定的样式类，如果省略此参数，则执行样式类的添加和删除切换操作。

**浏览器兼容性：**

（1）.IE10+浏览器支持此方法。

（2）.edge浏览器支持此方法。

（3）.谷歌浏览器支持此方法。

（4）.火狐浏览器支持此方法。

（5）.opera浏览器支持此方法。

（6）.safria浏览器支持此方法。

**代码实例如下：**

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.dandelioncloud.cn/" />  
<title>蒲公英云</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.toggle("a");
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="a b c">蒲公英云</div>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>
```

代码分析如下：

（1）.div元素的class属性具有三个样式类，分别是"a","b"和"c"。

（2）点击按钮之后，可以切换样式类"a"添加或者删除，由于div元素已经具有样式类"a"，那么首次的点击按钮可以删除样式类"a"，当第二个点击按钮的时候，再添加此样式类"a"，以此类推。

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.dandelioncloud.cn/" />  
<title>蒲公英云</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.toggle("a");
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="b c">蒲公英云</div>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>
```

上面的div元素默认并没有class样式类"a"，当首次点击按钮，会添加样式类"a"。

再次点击此按钮会将"a"删除，以此类推。

```html
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.dandelioncloud.cn/" />  
<title>蒲公英云</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.toggle("a",true);
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="b c">蒲公英云</div>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>
```

为toggle方法规定第二个参数，此参数规定方法是执行删除操作还是添加操作。

（1）.true，执行添加操作。

（2）.false，执行删除操作。

规定第二个参数之后，toggle方法失去对类的添加和删除切换功能，只执行一种操作。

toggle(class,true)等同于add(class)

toggle(class,false)等同于remove(class)

特别说明：IE浏览器并不支持第二个参数。