<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>关于
class
的多种函数封装</title>
<style>
body{
margin: 0;
}
li{
height: 20px;
}
</style>
</head>
<body>
<div
class
=
"box"
id=
"box"
>
<ul
class
=
"list"
>
<li
class
=
"in abc ab "
></li>
<li
class
=
"in ac b "
></li>
<li
class
=
"in a "
></li>
<li
class
=
"in acb "
></li>
<li
class
=
"in ba "
></li>
<li
class
=
"abc"
></li>
</ul>
</div>
<script>
function
indexOf(arr,value,start){
if
(arguments.length == 2){
start = 0;
}
if
(arr.indexOf){
return
arr.indexOf(value,start);
}
for
(
var
i = 0; i < arr.length; i++){
if
(arr[i] === value){
return
i;
}
}
return
-1;
}
function
noRepeat(arr){
var
result = [];
for
(
var
i = 0; i < arr.length; i++){
if
(indexOf(result,arr[i]) == -1){
result.push(arr[i]);
}
}
return
result;
}
function
inArray(arr,value){
for
(
var
i = 0; i < arr.length; i++){
if
(arr[i] === value){
return
true;
}
}
return
false;
}
function
trim(arr){
var
result = arr.replace(/^\s+|\s+$/g,
''
);
return
result;
}
function
getElementsByClassName(parentObj,classStr){
var
result = [];
var
objs = parentObj.getElementsByTagName(
'*'
);
var
targetArr1 = noRepeat(trim(classStr).split(/\s+/));
var
targetArr2 = noRepeat(trim(classStr).split(/\s*,\s*/));
if
(classStr.indexOf(
','
) == -1 ){
label:
for
(
var
i = 0; i < objs.length; i++){
var
arr = noRepeat(trim(objs[i].className).split(/\s+/));
for
(
var
j = 0; j < targetArr1.length; j++){
if
(!inArray(arr,targetArr1[j])){
continue
label;
}
}
result.push(objs[i]);
}
return
result;
}
else
{
label:
for
(
var
i = 0; i < objs.length; i++){
var
arr = noRepeat(trim(objs[i].className).split(/\s+/));
for
(
var
j = 0; j < targetArr2.length; j++){
if
(inArray(arr,targetArr2[j])){
result.push(objs[i]);
continue
label;
}
}
}
return
result;
}
}
function
addClass(obj,classStr){
var
array
= noRepeat(trim(obj.className).split(
'\s+'
));
if
(!inArray(
array
,classStr)){
array
.push(classStr);
}
obj.className =
array
.join(
' '
);
return
obj;
}
function
removeClass(obj,classStr){
var
array
= noRepeat(trim(obj.className).split(
'\s+'
));
var
index = indexOf(
array
,classStr);
if
(index != -1){
classStr.splice(index,1);
obj.className = classStr.join(
' '
);
}
return
obj;
}
function
toggleClass(obj,classStr){
var
array
= noRepeat(trim(obj.className).split(
'\s+'
));
if
(inArray(
array
,classStr)){
removeClass(obj,classStr);
}
else
{
addClass(obj,classStr);
}
}
</script>
</body>
</html>