Question

我正在编写一个插件，我需要用户自定义它的功能而不是外部CSS。我有一个对象，其中有一些默认样式，可以被用户覆盖。但我需要根据其他功能设置width和marginLeft。所以根据我的经验，我会通过在css方法中传递它来添加默认样式（由用户给出）但是如果不是通过添加新的.css()方法行，则无法添加更多字符串。

有没有更好的方法来编写此代码？

var style: {
    'position': 'fixed',
    'top': 0,
    'left': 0,
    'bottom': 0
};

$( 'div' ).css( style )
          .css({
              width: 300,
              marginLeft: -300,
          });

Answer 1

您可以使用传递给插件的设置扩展默认值

var styles = $.extend(
    {  // defaults
        position : 'fixed',
        top      : 0,
        left     : 0,
        bottom   : 0
    },
    settings, // settings object passed in
    {
        width      : 300, // always overwrites the above
        marginLeft : -300,
    }
)

$('div').css(styles);

正如您将注意到的，如果存在相同的密钥，则最后传递的对象将始终覆盖先前的对象这通常是插件如何使用用户传入的对象扩展默认设置，但编写起来并不容易，但是当遇到相同的键时，对象覆盖彼此的值的方式更加可扩展。

Answer 2

使用.extend（）它会将两个或多个对象的内容合并到第一个对象中。

var theirStyles = {
   'position' : 'absolute',
   'top' : '0',
   'left' : '0',
   'bottom' : '0',
   'margin' : '0',
   'font-size' : '30px'
};

var myStyles = {
   'width' : '300px',
   'margin-left' : '-300px'
};


var combinedStyles = $.extend({},  myStyles, theirStyles);


$('div').css(combinedStyles);

希望有所帮助！

FIDDLE。

Jquery CSS方法：更好的写作

2 个答案: