第34章 项目1-博客前端：封装库--CSS[上]1

在本章节中，我们将探讨如何在前端开发中封装CSS库，重点关注如何获取内容和样式，以及如何扩展这个库以支持更多的CSS操作。我们来看一下获取内容和样式的实现。 1. 获取内容： 在封装的库中，`html()`方法被用来设置或获取HTML元素的内容。当不传递任何参数时，它会返回元素的innerHTML，即当前内容。如果传递了一个字符串参数，那么它将更新元素的内容。以下是如何实现这个功能的示例： ```javascript 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; }; ``` 2. 获取CSS样式： `css()`方法则用于设置或获取元素的CSS样式。如果只有一个参数，它会返回元素的指定样式属性值。如果提供两个参数，它将设置该样式属性的值。考虑到浏览器兼容性，这里使用了`window.getComputedStyle`和`currentStyle`来分别处理标准浏览器和IE浏览器的情况： ```javascript 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操作。 3. 获取具有特定类名的元素： 为了方便地获取具有相同类名的一组元素，我们可以定义`getClass()`方法。这个方法遍历页面上的所有元素，检查它们的className属性，然后将匹配的元素添加到结果集合中： ```javascript 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; }; ``` 4. 获取特定索引位置的元素： 有时我们可能只想操作获取到的类名元素中的某一个，`getElement()`方法允许我们指定一个索引，返回对应位置的元素： ```javascript Base.prototype.getElement = function (num) { var element = this.elements[num]; this.elements = []; this.elements[0] = element; return this; }; ``` 5. 在特定范围内获取类名元素： 进一步扩展，我们可以增加一个可选参数`idName`，这样就可以限制获取类名为`className`的元素只在id为`idName`的元素的子节点中查找： ```javascript 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; }; ``` 这些封装的方法使得我们在处理DOM元素时更加便捷，特别是当我们需要进行批量操作或者特定条件下的CSS操作时。通过这样的库，我们可以更高效地控制页面的样式和内容，提升代码的可维护性和可复用性。同时，这个库还可以继续扩展，例如增加对伪类选择器的支持，或者添加更多的CSS属性操作方法。