读取CSS和innerHTML
上一节基础库实现了获取ID节点、元素节点以及设置CSS、设置innerHTML、和触发点击事件的功能,这一节,首先来看读取CSS和innerHTML的功能。
添加读取功能之后的css()方法:
Base.prototype.css = function(attr,value){
for(var i = 0; i < this.elements.length; i++){
// 参数个数为1时为读取
if(arguments.length == 1){
if(typeof window.getComputedStyle != 'undefined'){// w3c
return window.getComputedStyle(this.elements[i],null)[attr];
}else if(typeof this.elements[i].currentStyle != 'undefined'){// IE
return this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
}
添加读取功能之后html()方法:
Base.prototype.html = function(str){
for(var i = 0; i < this.elements.length; i++){
// 参数个数为0时,为读取
if(arguments.length == 0){
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this;
}
获取class节点
HTML:
<p class='red'>段落</p>
<p class='red'>段落</p>
<p class='red'>段落</p>
demo.js:
$().getClass('red').css('color','red');
base.js:
// 获取CLASS节点数组
Base.prototype.getClass = function(className){
var all = document.getElementsByTagName('*');
for(var i= 0; i < all.length; i++){
if(all[i].className==className){
this.elements.push(all[i]);
}
}
return this;
}
获取某一个节点
base.js:
// 获取某一个节点
Base.prototype.getElement = function(num){
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
}
demo.js:
$().getClass('red').css('color','red').getElement(2).css('color','green');
CLASS被区域分隔
HTML:
<div id='aaa'>
<p class='red'>段落</p>
<p class='red'>段落</p>
<p class='red'>段落</p>
</div>
<div id='bbb'>
<p class='red'>段落</p>
<p class='red'>段落</p>
<p class='red'>段落</p>
</div>
demo.js:
$().getClass('red','bbb').css('color','red').getElement(2).css('color','green');
base.js:
// 获取CLASS节点数组
Base.prototype.getClass = function(className,idName){
var node = null;
if(arguments.length == 2){
node = document.getElementById(idName);
}else{
node = document;
}
var all = node.getElementsByTagName('*');
for(var i= 0; i < all.length; i++){
if(all[i].className==className){
this.elements.push(all[i]);
}
}
return this;
}
base.js完整代码
// 前台调用
var $ = function(){
return new Base();
}
// 基础库
function Base(){
// 创建一个数组来保存获取的节点和节点数组
this.elements = [];
}
// 获取ID节点
Base.prototype.getId = function(id){
this.elements.push(document.getElementById(id));
return this;
}
// 获取元素节点数组
Base.prototype.getTagName = function(tag){
var tags = document.getElementsByTagName(tag);
for(var i = 0; i < tags.length; i++){
this.elements.push(tags[i]);
}
return this;
}
// 获取CLASS节点数组
Base.prototype.getClass = function(className,idName){
var node = null;
if(arguments.length == 2){
node = document.getElementById(idName);
}else{
node = document;
}
var all = node.getElementsByTagName('*');
for(var i= 0; i < all.length; i++){
if(all[i].className==className){
this.elements.push(all[i]);
}
}
return this;
}
// 获取某一个节点
Base.prototype.getElement = function(num){
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
}
// 设置CSS
Base.prototype.css = function(attr,value){
for(var i = 0; i < this.elements.length; i++){
if(arguments.length == 1){
if(typeof window.getComputedStyle != 'undefined'){// w3c
return window.getComputedStyle(this.elements[i],null)[attr];
}else if(typeof this.elements[i].currentStyle != 'undefined'){// IE
return this.elements[i].currentStyle[attr];
}
}
this.elements[i].style[attr] = value;
}
return this;
}
// 设置innerHTML
Base.prototype.html = function(str){
for(var i = 0; i < this.elements.length; i++){
if(arguments.length == 0){
return this.elements[i].innerHTML;
}
this.elements[i].innerHTML = str;
}
return this;
}
// 触发点击事件
Base.prototype.click = function(fn){
for(var i = 0; i < this.elements.length; i++){
this.elements[i].onclick = fn;
}
return this;
}