jquery - jQuery 插件 - 如果未填写任何选项，则返回 css 属性

Question

我不明白为什么如果我试图返回 css 边框属性，它会返回一个空字符串，即使我已经用 css 设置了边框。我也尝试使用内联方法设置边框样式，但仍然无法正常工作..知道吗？谢谢！

(function($){

    var methods = {
    init : function( options, callbacks) {
        if(options === undefined) {
            return this.css("border");
        }

        return this.each(function(){
            if(options === null) {
                $(this).css("border","none");
                return;
            } else if(typeof options === "string") {
                $(this).css("border", options);
                return;
            } else if(typeof options === "object") {

                if(typeof options.style !== "undefined") {
                    $(this).css("border-style", options.style);
                } else {
                    $(this).css("border-style", "solid");
                }

                if(typeof options.width !== "undefined") {
                    $(this).css("border-width", options.width); 
                }

                if(typeof options.color !== "undefined") {
                    $(this).css("border-color", options.color); 
                }

                if(typeof options.radius !== "undefined") {
                    $(this).css("border-radius", options.radius);   
                }
            }
        });
    }
};

$.fn.border = function(method) {
    if ( methods[method] ) {
        return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else {
        return methods.init.apply( this, arguments );
    }
};

})(jQuery);

如果我试图返回元素的颜色..一切似乎都很好..但不是边框属性。

Answer 1

我已经像这样解决了这个问题：

(function($){

    var methods = {
        init : function( options, callbacks) {

            return this.each(function(){
                        if(options === null) {
                    $(this).css("border","none");
                } else if(typeof options === "string") {
                    $(this).css("border", options);
                } else if(typeof options === "object") {

                                if(typeof options.style !== "undefined") {
                                    $(this).css("border-style", options.style);
                                } else {
                                    $(this).css("border-style", "solid");
                                }

                    if(typeof options.width !== "undefined") {
                        $(this).css("border-width", options.width); 
                    }

                    if(typeof options.color !== "undefined") {
                        $(this).css("border-color", options.color); 
                    }

                    if(typeof options.radius !== "undefined") {
                        $(this).css("border-radius", options.radius);   
                    }
                }
            });
        },
            getBorderStyle: function(options, callback) {

                    var elements = new Array();

                    this.each(function(){

                        var borderProperties = {};

                        borderProperties.style = this.style.borderStyle;
                        borderProperties.color = this.style.borderColor;
                        borderProperties.width = this.style.borderWidth;
                        borderProperties.radius = this.style.borderRadius;
                        borderProperties.element = this;
                        elements.push(borderProperties);
                    });

                    return elements;
            }
    };

    $.fn.border = function(method) {
            if ( methods[method] ) {
                return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
            } else if(method === undefined) {
                return methods["getBorderStyle"].apply(this, arguments);
            } else {
                return methods.init.apply( this, arguments );
            }
    };

})(jQuery);