9、class获取、添加删除状态切换

来源：互联网发布：古代山珍海味知乎编辑：程序博客网时间：2024/06/05 03:11

1、class——获取样式名or长度

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><script>window.onload = function(){    var oBtn = document.getElementById('btn1');    oBtn.onclick = function(){        //alert(this.className);        //alert(this.classList.length);        //alert(this.tagName);        //alert(this.classList[1]);    };};</script></head><body>    <input id="btn1" class="add active box" type="button" value="按钮" /></body></html>

2、class——添加删除

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title><script>window.onload = function(){    var oBtn = document.getElementById('btn1');    oBtn.onclick = function(){        //this.classList.add("active");//添加一个样式        //this.classList.remove("active");//删除一个样式        //alert(this.classList.contains("add1"));//判断是否包含一个样式        this.classList.toggle("active");//添加删除一个样式状态切换    };};</script></head><body><input id="btn1" class="add active box active active active" type="button" value="按钮" /></body></html>

阅读全文

0 0