jQuery cssText Helps You Improve Browser Reflows

cssText

You know you can manage to redraw an element with single browser reflow. Instead of using .style.property … you can simply add all CSS properties you’d like to change with simply appending to style.cssText property.

var csstxt = $('#selector').css('cssText') + ';top:100;left:100;border:1px solid red;color:#f00;';
$('#selector').css('cssText', csstxt);

That code is a replacement for

$('#selector').css({
   left : '100px',
   top : '100px',
   border : '1px solid red',
   color : '#f00'
});

enjoy!

4 thoughts on “jQuery cssText Helps You Improve Browser Reflows

  1. Topic is old, but still, I personnaly use this when it come to multi-styling :

    $(“form button”).each(function(){
    this.style.cssText+= “;background:#ddd;color:#222;padding:5px;border-radius:4px;border:1px outset #888;”
    });

    as you keep more pure javascript, you avoid to use jQuery selector « $(‘#selector’) » twice wich lighten the process and also give more flexibility as you can do the same with non-style attributes without the need of a cross-browser api

    And I don’t want to sound like a jQuery hater, I love it :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>