开发者社区> 向善的灯> 正文

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

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779 ...
+关注继续查看
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛: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);

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《JavaScript开发框架权威指南》——2.7 小结
本节书摘来自异步社区《JavaScript开发框架权威指南》一书中的第2章,第2.7节,作者:【美】Tim Ambler , Nicholas Cloud著,更多章节内容可以访问云栖社区“异步社区”公众号查看
1441 0
angular定制组件-bootstrap(css框架)
需要的文件 bootstrap.css ui-bootstrap-tpls.js 模态框 angular定制的bootstrap的模态框,可以方便地将视图与控制器绑定。 模块的定义与模块的控制器: //定义模块时引入依赖 angular .module('myApp', [ 'ui.bootstrap' ]); //定义控制器时传入依赖 angu
1703 0
+关注
53
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载