3.项目 1-博客前端：封装库--CSS[上]

学习要点：

1.获取内容
2.继续封装 CSS

在使用库的时候，我们通过 css 方法来设置某个或多个节点的样式。这节课准备讨论如
何获取内容和样式，并且封装一些 css 的其他方法。

一．获取内容

在上一节课我们通过 html()方法和 css()方法可以设置标题内容和 CSS 样式，但我们如
何通过这两个方法来获取内容或样式呢？比如：

alert($().getId('box').html()); //获取标题内容
alert($().getId('box').css('fontSize')); //获取 CSS 样式

要实现获取内容，其实很简单，只要判断传递过来的参数即可。

//设置或获取内容
Base.prototype.html = function (str) {
for (var i = 0; i < this.elements.length; i ++) {
if (arguments.length == 0) { //判断没有传参
return this.elements[i].innerHTML; //返回内容
} else {
this.elements[i].innerHTML = str;
}
}
return this;
}

如果要实现 CSS，那就有一些问题，如果只是行内的 style。所以，要获取 link 或者<style>
样式的内容，就必须计算式样式来获取。

//设置或获取 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') {
return window.getComputedStyle(this.elements[i], null)[attr];
} else if (typeof this.elements[i].currentStyle != 'undefined') {
return this.elements[i].currentStyle[attr];
}
} else {
this.elements[i].style[attr] = value;
}
}
return this;
}

二．继续封装 CSS

除了通过 ID 来获取唯一性的节点，我们也可以通过 getClass()方法来获取相同的多个节
点。

//获取 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;
};

有时候，我们不需要把所有获取到的 class 节点都设置 CSS，只需要某一个，我们可以
筛选一下。

//获取节点数组的某一个
Base.prototype.getElement = function (num) {
var element = this.elements[num];
this.elements = [];
this.elements[0] = element;
return this;
}

class 可以设置整个网页，也就是说：可以多，可以少。而我们要求在某一个区域下的
所有 class，我们只需要传递相关的节点下即可。

//假定范围区域只能是 ID
Base.prototype.getClass = function (className, idName) {
var node = null;
if (arguments.length == 2) {
node = document.getElementById(idName);
} else {
node = document;
}
var all = node.getElementsByTagName('*');
};

感谢收看本次教程！