CSS類的操作<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">.b1 {width: 100px;height: 100px;background-color: skyblue;}.b2 {/* width: 200px; */height: 200px;background-color: aquamarine;}</style><script type="text/javascript">window.onload = function() {// 獲取boxvar box = document.getElementById("box");// 獲取btn01var btn01 = document.getElementById("btn01");// 獲取btn02var btn02 = document.getElementById("btn02");// 為btn01綁定單擊響應(yīng)函數(shù)btn01.onclick = function() {// 修改box的樣式/*通過style屬性來修改元素的樣式，沒修改一個樣式，瀏覽器就需要重新渲染一次頁面 這樣的執(zhí)行的性能是比較差的，而且這種形式當(dāng)我們要修改多個樣式時，也不方便*/// box.style.width="200px";// box.style.height="200px";// box.style.backgroundColor="yellow";// 修改box的class屬性/*我們可以通過修改元素的class屬性來間接的修改樣式只需要一次，即可同時修改多個樣式 瀏覽器只需要重新渲染頁面一次，性能比較好 并且這種方式，可以使表現(xiàn)和行為進(jìn)一步的分離*/toggleClass(box,"b2");}btn02.onclick=function(){removeClass(box,"b2");}};// 定義一個函數(shù)，用來向一個元素中添加指定的class屬性值/* - 參數(shù)： obj:要添加class屬性的元素 cn:要添加的class值*/function addClass(obj, cn) {// 檢查obj中是否含有cn》if (!hasClass(obj, cn)) {obj.className += " " + cn;}}/*判斷一個元素中是否含有指定的class屬性值 - 參數(shù)： obj: cn:*/function hasClass(obj, cn) {// 判斷obj中有沒有cn class // 創(chuàng)建一個正則表達(dá)式// var reg=/\bb2\b/;var reg = new RegExp("\\b" + cn + "\\b");return reg.test(obj.className);}// 刪除一個元素中的指定的class屬性function removeClass(obj, cn) {// 創(chuàng)建一個正則表達(dá)式var reg = new RegExp("\\b" + cn + "\\b");// 刪除classobj.className = obj.className.replace(reg, "");}/*toggleClass可以用來切換一個類 - 如果元素中具有該類,則刪除 - 如果元素中沒有該類,則添加*/function toggleClass(obj,cn){// 判斷obj中是否含有cnif(hasClass(obj,cn)){// 有,則刪除removeClass(obj,cn);}else{addClass(obj,cn);}}</script></head><body><button id="btn01">點擊按鈕以后修改box的樣式</button><br><br><button id="btn02">點擊按鈕以后刪除box的樣式</button><br><br><div id="box" class="b1"></div></body></html>
|
