javascript
/**
* 这是一个自定义的js工具库
* @author llh
* @date 2017/4/19
* @version 0.0.1
*/
/**
* 实现标签对象的样式属性设置或获取
* @param object 需要使用的标签对象(标签对象指的是使用类似document.getElementById得到的结果)
* @param attribute 我们需要操作的样式属性
* @param value 如果是重新设置需要提供这个内容,表示把这个内容设置到样式里
*/
function css(object, attribute, value){
// 在js里函数虽然声明参数,但实际调用过程中可以不提供参数或不提供完整的参数,所以虽要使用arguments判断调用者
// 传递了多少个参数
if(arguments.length == 2){ // 获取
if(object.currentStyle){ // IE浏览器
//object.currentStyle.width;
return object.currentStyle[attribute];
}else{
return getComputedStyle(object, false)[attribute];
}
}else if(arguments.length == 3){ // 设置
object.style[attribute] = value;// 不能用currentStyle.attribute否则js会认为是调用
// currentStyle里的attribute属性
}
}
/**
* 兼容低版本IE实现getElementsByClassName的元素查找
* @param {Object} className 需要查找的类样式名称
*/
function getElementsByClassName(className){
var aResult = []; //保持查找到所有结果
// 1. 获取DOM树里所有的标签
var aElements = document.getElementsByTagName('*');
// 2. 遍历上一步的结果
var aClassNames;
for (var i=0,length=aElements.length; i<length; i++){
// 3. 获取每一个元素的class属性
// 3.1 判断元素是否有class属性
if (aElements[i].className){
aClassNames = aElements[i].className;
aClassNames = aClassNames.split(' '); // 处理一个class使用多个类选择器
//aElements.getAttribute('class')
// 4. 迭代aClassNames获取每一个类选择器
for (var j=0,len=aClassNames.length; j<len; j++){
// 5. 比较class属性的内容是否和参数的内容一致
if (aClassNames[j] == className){
// 5. 如果是一致的,把元素放到aResult
aResult.push(aElements[i]);
// 6. 如果已经找到符合的内容,后面的就不需要再做检查
break;
}
}
}
}
return aResult;
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自定义getElementsbyClassName</title>
</head>
<body>
<div class="div1">
<ul class="ul1">
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
<ul class="ul1">
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
</div>
<div class="div1">
<ul class="ul1">
<li class="li1 li1-1 li1-2"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
<ul class="ul1">
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
</div>
</body>
<script type="text/javascript" src="js/utils.js" ></script>
<script>
var ary = getElementsByClassName('li1');
// alert(ary.length);
</script>
</html>