Jquery CSS method: better writing

Question

I'm programming a plugin and I need users to customize it the function and not in an external CSS. I have an object with some default style in it that can be overriden by the users. BUT I need to set the width and the marginLeft according to other functions. So in my experience I would add the default style (given by the user) by passing it in the css method BUT I can't add more strings if not by adding a new line of .css() method.

Is there a better way to write this code?

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

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

I'am not really sure what your question is, but feel the need to give you this link: learn.jquery.com/plugins/basic-plugin-creation/… — Nico O
– Nico O, Commented Jul 18, 2014 at 17:38
The following question might be helpful for you: stackoverflow.com/questions/929776/… — Sumurai8
– Sumurai8, Commented Jul 18, 2014 at 18:04

adeneo · Accepted Answer · 2014-07-18 17:38:42Z

2

You can extend the defaults with the settings passed to the plugin

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);

As you'll notice, the object passed last will always overwrite the previous ones if the same key exists.
This is generally how plugins extend default settings with objects passed in by users, it's not really easier to write, but it is more extendable in the way the objects overwrite each others values when the same key is encountered.

answered Jul 18, 2014 at 17:38

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aaron · Accepted Answer · 2014-07-19 16:20:20Z

1

Using .extend() it will merge the contents of two or more objects together into the first object.

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);

Hope that helps!

The FIDDLE.

edited Jul 19, 2014 at 16:20

answered Jul 18, 2014 at 21:11

Aaron

985 bronze badges

3 Comments

ctrlmaniac Over a year ago

Does it overwrite others values when the same key is encountered?

Aaron Over a year ago

Yes. If you look at the jsfiddle (using Chrome Developer Tools) and inspect the word 'Work' you'll notice that width: 300px is there but margin-left:-300px was replaced with margin:0.

Aaron Over a year ago

If you need it the other way around switch the two variables within $.extend. var combinedStyles = $.extend({}, theirStyles, myStyles); Then myStyles will overwrite theirStyles.

Collectives™ on Stack Overflow

Jquery CSS method: better writing

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related