js-addClass,removeClass
addClass
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
addClass(oDiv,'box1');
function addClass(obj,className){
//如果原來沒有class
if(obj.className == ''){
obj.className = className;
}else{
//如果原來有class
var arrClassName = obj.className.split('');
var _index = arrIndexOf(arrClassName,className);
if(_index == -1){
//如果要新增的class在原來的class中不存在
obj.className += ' '+ className;
}
//如果要新增的class在原來的class中存在
}
}
function arrIndexOf(arr,v){
for(var i=0;i<arr.length;i++){
if(arr[i] == v){
return i;
}
}
return -1;
}
}
</script>
</head>
<body>
<div id="div1" class="box">div</div>
</body>
</html>
removeClass
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
removeClass(oDiv2,'box');
addClass(oDiv,'box1');
function addClass(obj,className){
//如果原來沒有class
if(obj.className == ''){
obj.className = className;
}else{
//如果原來有class
var arrClassName = obj.className.split('');
var _index = arrIndexOf(arrClassName,className);
if(_index == -1){
//如果要新增的class在原來的class中不存在
obj.className += ' '+ className;
}
//如果要新增的class在原來的class中存在
}
}
function removeClass(obj,className){
//如果原來有class
if(obj.className != ''){
var arrClassName = obj.className.split(' ');
var _index = arrIndexOf(arrClassName,className);
//如果有我們要移除的class
if(_index != -1){
arrClassName.splice(_index,1);
obj.className = arrClassName.join(' ');
}
}
}
function arrIndexOf(arr,v){
for(var i=0;i<arr.length;i++){
if(arr[i] == v){
return i;
}
}
return -1;
}
}
</script>
</head>
<body>
<div id="div1" class="box">div</div>
<div id="div2" class="box box1">div2</div>
</body>
</html>