您的位置:首页> 前端教程> JS教程
文章导航

JavaScript toggle() 方法

2018-11-11 16:40| 作者: admin| 查看: 6194| 评论: 0|来自: 蚂蚁部落

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

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

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

关于classList更多内容参阅JavaScript classList 属性一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
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.softwhy.com/" />  
<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.softwhy.com/" />  
<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.softwhy.com/" />  
<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浏览器并不支持第二个参数。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部