jquery set css for multiple elements syntax

Question

I'm developing an Jquery plugin and have to set many css values inside of script to make it flexible.

It looks something like this:

...var loadingBarInsideFWidth = loadingBarWidth - 4;
var loadingBarInsideWidth;
$(holder).find('.round').css({
'width':setRoundWidth,
'height':setRoundWidth
});
$(holder).find('.pointer').css({
'width':setPointerWidth,
'height':setPointerWidth,
'left':rotCenter,
'top':rotCenter*2
});...

and so on for about 70 rows of code. Just wanted to ask if it's ok so, or is there a better way?

thx

p.s. sure there is an external css file, all these values are about preloader and some navigation elements positions and sizes relativeley to containing element size.

I think you can create classes for your style and add the class. This will make the plug in lighter. — Narendra
– Narendra, Commented Jul 13, 2012 at 14:17

Christoph · Accepted Answer · 2012-07-13 14:38:16Z

I would prefer to separate CSS and JS: put all the styles into a file and load it dynamically on demand.

If that's not what you want, you could write:

(function(){
   // do some caching
   $holder = $(holder);

   function _css(elem,rules){
      $holder.find(elem).css(rules);
   }

    _css(".round",{'width':setRoundWidth, 'height':setRoundWidth});
})();

or, to distinguish further - put the styles into an object and iterate over it. This makes it more "CSS"-like.

(function(){
   // do some caching
   $holder = $(holder);
   styles = {
       ".round":  { 'width' :setRoundWidth,
                    'height':setRoundWidth
                  },
       ".pointer":{ 'width' :setPointerWidth,
                    'height':setPointerWidth,
                    'left'  :rotCenter,
                    'top'   :rotCenter*2
                  }
   }
   for (var elem in styles){
      if (styles.hasOwnProperty(elem)) $holder.find(elem).css(styles[elem]);
   }
})();

AdityaSaxena · Accepted Answer · 2012-07-13 14:14:29Z

1

You could add all these styles from a css file...and include the plugin with the css file...this way, your plugin can also be customized for look and feel by other people and they will not play with your javascript/jquery code.

answered Jul 13, 2012 at 14:14

AdityaSaxena

2,15711 silver badges16 bronze badges

3 Comments

Kotanet Over a year ago

sure there is an external css file, all these values are about preloader and some navigation elements positions and sizes relativeley to containing element size.

AdityaSaxena Over a year ago

Then you could add two css files, one being core, and the other one which people can modify. You should not put css inside javascript, it'll become a pain for yourself later if you have to adjust the layout at some point of time :)

Kotanet Over a year ago

but all these values are calculated with js. For example width of preloader is 30% from container width and so on. All visual parameters such as color, background so on are in separate file.

Mitya · Accepted Answer · 2012-07-13 14:18:00Z

1

Adding 70 CSS styles from JS is going to cause a lot of reflows/repaints if you're applying it to in-DOM elements.

If you don't want to ship a dedicated CSS sheet with your plugin, consider writing the styles directly to a dynamic CSS sheet element.

You can do this either by DOM-scripting a <style> tag and putting the styles in there, or hijacking one of the in-page, linked stylesheets. See http://www.javascriptkit.com/domref/stylesheet.shtml.

answered Jul 13, 2012 at 14:18

Mitya

34.7k15 gold badges70 silver badges125 bronze badges

2 Comments

Mitya Over a year ago

OK... why would 70 lines of code per-se be a problem? I thought you meant 70 styles.

Kotanet Over a year ago

it just looked not very clean for me... parsing all the rules throug a function, as Christoph adviced made it look much better.

Christoph · Accepted Answer · 2012-07-13 14:18:40Z

0

Put your css styles into a class in your style sheet.

Then simply add that class to your element when required.

jQuery(".myElement").addClass("myClass");

edited Jul 13, 2012 at 14:18

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

answered Jul 13, 2012 at 14:18

Billy Moat

21.1k7 gold badges47 silver badges37 bronze badges

Collectives™ on Stack Overflow

jquery set css for multiple elements syntax

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related