jQuery – adding CSS with jquery

  1. css(height)
  2. height()
  3. cssText

 

jQuery adding height

$('.ui-widget-overlay').css("height", "985px !important");
$j("#wowslider_2542").height(new_height+'px');

height() – can be use to set or get the height of the selected element. If you need height for calculation reason than height() is best option to use because it returns in pixels. Height  in css returns value in units. Sometimes the css(height) returns something else than the value return with height().

Reference:

Using jQuery you can use the following methods:
  • .height (element height, without padding , margins or borders)
  • .innerHeight (element height + padding)
  • .outerHeight (element height + padding and borders)
  • .outerHeight(true) (element height + padding + borders + margin)
  • .width (element width, without padding , margins or borders)
  • .innerWidth (element width + padding)
  • .outerWidth (element width + padding and borders)
  • .outerWidth(true) (element width + padding + borders + margin)

Link to fiddle

Using cssText

cssText will append css styles as string and not as a variable. The issue I came across where css(height) with important tag was not working than I tried to use cssText and it worked fine. cssText helps to improve browser reflows. But need to use cssText carefully as it sets or clears everything in the css for that particular element. Note: cssText doesnt need important as it is going to modify the inline css. Inline css is more powerful that css in stylesheet.

$j(".scrolling_img_cont img").css('cssText','height:'+new_height');

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

inputObj.css('cssText', inputObj.attr('style')+'padding-left: ' + (width + 5) + 'px !IMPORTANT;');

Using Attribute

$(this).attr('style', 'height:1167px !important');