【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
版权声明：本文为博主原创文章，未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779
// 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);
