PS:class的調用,其實是可以疊加的,當然了這要求樣式不同的情況下,如果樣式相同,則後一個樣式會覆蓋前一個樣式。 1.舉例如下: 所以最後‘測試關於class的調用’幾個字的樣式是:font-size:50px; color:green; 2.這樣的添加類方式很繁瑣,每次添加一個新的,我還要帶上 ...
PS:class的調用,其實是可以疊加的,當然了這要求樣式不同的情況下,如果樣式相同,則後一個樣式會覆蓋前一個樣式。
1.舉例如下:
<div id="test" class="aaa bbb">測試關於class的調用</div>
.aaa{ font-size:20px; color:red; } .bbb{ font-size:50px; color:green; }
var test=document.getElementById('test'); test.className='aaa'; test.className='aaa bbb';//因為aaa和bbb的樣式相同,所以,bbb的樣式會覆蓋aaa的樣式
所以最後‘測試關於class的調用’幾個字的樣式是:font-size:50px; color:green;
2.這樣的添加類方式很繁瑣,每次添加一個新的,我還要帶上之前寫的類,容易帶漏,並且還要檢查是否帶全,所以可以編寫函數方法來解決添加類和刪除類的問題:
function hasClass(element,className){ //判斷是否存在類 return element.className.match(new RegExp('(\\s|^)'+className+'(\s|$)')); } //添加一個Class function addClass(element,className){ if(!hasClass(element,className)){ element.className+=' '+className; } } //刪除一個Class function removeClass(element,className){ if(hasClass(element,className)){ element.className=element.className.replace (new RegExp('(\\s|^)'+className+'(\s|$)'),' '); } }