【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装

// CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)【只要是需要使用到this获取到的元素集合这个变量的时候，这里就是需要进行链式访问的】 xframe.extend({ /** * 给DOM元素设置/取值CSS样式 * @return {*} */ css: function () { // 分为两种情况，一种是取值模式，一种是设置模式 var arg = arguments, len = arg.length, j = this.length - 1; if (len === 0) { // 没有参数的话，就直接返回这个DOM集合 return this; } else if (len === 1) { // 取值模式 if (typeof arg[0] === 'string') { if (this[0].currentStyle) { // w3c return this[0].currentStyle[arg[0]]; } else { // 其他IE return getComputedStyle(this[0], false)[arg[0]]; } } else if (typeof arg[0] === 'object') { // 如果要获取一系列对象的属性信息, 如果传过来的一个参数是一个json对象的话，这里也采用这种方式 // {name : xiugang, age : 18} for (var item in arg[0]) { // 从后向前开始遍历，设置模式 for (; j >= 0; j--) { // 由于CSS在设置值的时候的取值模式和设置模式的不同，这里需要先使用驼峰表示法进行处理一下 // 先把item转换为：backgroundcolor --> backgroundColor item = $.camelCase(item) this[j].style[item] = arg[0][item]; } } } } else if (len === 2) { // 设置模式 for (; j >= 0; j--) { // 第一个参数是我们需要设置的值 this[j].style[$.camelCase(arg[0])] = arg[1]; } } return this; }, /** * 隐藏一个元素 * @return {hide} */ hide: function () { var j = this.length - 1; for (; j >= 0; j--) { this[j].style.display = 'none'; } return this; // 方法二：使用之前封装好的框架进行遍历 this.each(function () { this.style.display = 'none'; }) }, /** * 显示元素 * @return {show} */ show: function () { this.each(function () { this.style.display = 'block'; }) return this; }, /** * 获取元素的宽度 * @return {*} */ width: function () { return this[0].clientWidth; }, /** * 获取元素的高度 * @return {*} */ height: function () { return this[0].clientHeight; }, /** * //当元素出现滚动条时候，这里的高度有两种：可视区域的高度 实际高度（可视高度+不可见的高度） * 获取元素的滚动宽度 * @return {*} */ scrollWidth: function () { return this[0].scrollWidth; }, /** * 获取元素的滚动高度 * @return {*} */ scrollHeight: function () { return this[0].scrollHeight; }, /** * 元素滚动的时候 如果出现滚动条 相对于左上角的偏移量 * @return {*} */ scrollTop: function () { return this[0].scrollTop; }, /** * 元素滚动的时候相对于左上角的距离 * @return {*} */ scrollLeft: function () { return this[0].scrollLeft; }, }); // 不需要参与链式访问的 xframe.extend(xframe, { getThis: function () { console.log(xframe, typeof this); // function, 这里的this指向的实际上是一个函数function (selector, context) }, /** * 获取屏幕的高度 * @return {number} */ screenHeight: function () { return window.screen.height; }, /** * 虎丘屏幕的款U盾 * @return {number} */ screenWidth: function () { return window.screen.width; }, /** * 获取浏览器窗口文档显示区域的宽度，不包括滚动条 * @return {number} */ wWidth: function () { return document.documentElement.clientWidth; }, /** * 获取浏览器窗口文档显示区域的高度，不包括滚动条 * @return {number} */ wHeight: function () { return document.documentElement.clientHeight; }, /** * 文档滚动区域的整体的高 * @return {number} */ wScrollHeight: function () { return document.body.scrollHeight; }, /** * 文档滚动区域的整体的宽度 * @return {number} */ wScrollWidth: function () { return document.body.scrollWidth; }, /** * 获取滚动条相对于其顶部的偏移 * @return {number} */ wScrollTop: function () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; return scrollTop; }, /** * 获取整个文档窗口的距离整个窗口的宽度和高度（滚动条相对于顶部和左边的距离） * @return {number} */ wScrollLeft: function () { var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft; return scrollLeft; } }); })(xframe);