JavaScript实例详解之HTML元素操作( 三 ) _生活百科

HTML5解决方案：p元素对象.classList.toggle(“header”);
举个例子

文章插图

代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>classList的使用</title> <style> .bg{background:#ccc;} .strong{font-size:24px;color:red;} .smooth{height:30px;width:120px;border-radius:10px;} </style> </head> <body> <ul> <li>PHP</li> <li class="bg">JavaScript</li> <li>C++</li> <li>Java</li> </ul> <script> // 获取第2个li元素 var ele = document.getElementsByTagName('li')[1]; // 若li元素中没有strong类，则添加 if (!ele.classList.contains('strong')) { ele.classList.add('strong'); } // 若li元素中没有smooth类，则添加；若有删除 ele.classList.toggle('smooth'); console.log('添加与切换样式后：'); console.log(ele); </script> <script> ele.classList.remove('bg'); console.log('删除后：'); console.log(ele); </script> </body> </html>除此之外， classList属性还提供了许多其他相关操作的方法和属性。

文章插图

五、【案例】标签栏切换效果

文章插图

代码实现思路：

代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>标签栏切换效果</title> <style> .tab-box{width:383px;margin:10px;border:1px solid #ccc;border-top:2px solid #206F96;} .tab-head{height:31px;} .tab-head-p{width:95px;height:30px;float:left;border-bottom:1px solid #ccc;border-right:1px solid #ccc;background:#206F96;line-height:30px;text-align:center;cursor:pointer;color:#fff;} .tab-head .current{background:#fff;border-bottom:1px solid #fff;color:#000;} .tab-head-r{border-right:0;} .tab-body-p{display:none;margin:20px 10px;} .tab-body .current{display:block;} </style> </head> <body> <p class="tab-box"> <p class="tab-head"> <p class="tab-head-p current">标签一</p> <p class="tab-head-p">标签二</p> <p class="tab-head-p">标签三</p> <p class="tab-head-p tab-head-r">标签四</p> </p>  <p class="tab-body"> <p class="tab-body-p current"> 1 </p> <p class="tab-body-p"> 2 </p> <p class="tab-body-p"> 3 </p> <p class="tab-body-p"> 4 </p> </p> </p> <script> // 获取标签栏的所有标签元素对象 var tabs = document.getElementsByClassName('tab-head-p'); // 获取标签栏的所有内容对象 var ps = document.getElementsByClassName('tab-body-p'); for (var i = 0; i < tabs.length; ++i) { // 遍历标签部分的元素对象 tabs[i].onmouseover = function() { // 为标签元素对象添加鼠标滑过事件 for (var i = 0; i < ps.length; ++i) { // 遍历标签栏的内容元素对象 if (tabs[i] == this) { // 显示当前鼠标滑过的li元素 ps[i].classList.add('current'); tabs[i].classList.add('current'); } else { // 隐藏其他li元素 ps[i].classList.remove('current'); tabs[i].classList.remove('current'); } } }; } </script> </body> </html>相关推荐：javascript教程
以上就是JavaScript实例详解之HTML元素操作的详细内容，更多请关注电脑自学网其它相关文章！