jQuery CSS Methods

The .css() method reads and changes the style of an element. It is the quick way when the value comes from your code.

Get a CSS property

<p id="text" style="color: red; font-size: 20px;">Hello</p>

console.log($('#text').css('color'));
console.log($('#text').css('font-size'));

Notice that the color is returned in the rgb() format, not as the word red which we wrote. Browsers return the computed value, so compare colors with care.

Set a CSS property

<p id="text">Hello</p>

$('#text').css('color', 'blue');

Set many properties

$('#text').css({
  'color': 'green',
  'font-size': '18px',
  'background-color': '#eee'
});

You can write the property names in the CSS way with a dash ('font-size') or in camelCase (fontSize). With an object, camelCase does not need quotes.

Relative values

<div id="box" style="width: 100px">Box</div>

$('#box').css('width', '+=50');
console.log($('#box').css('width'));

Use a function

<p>A</p><p>B</p><p>C</p>

$('p').css('padding-left', function (index) {
  return (index * 10) + 'px';
});

Remove a style

<p id="text" style="color: red; font-weight: bold;">Hello</p>

$('#text').css('color', '');   // an empty string removes the inline style

width() and height() methods

These methods are used to get and set the size of an element, in numbers without the “px”.

Method	Returns
.width() / .height()	Size of the content only
.innerWidth() / .innerHeight()	Content and padding
.outerWidth() / .outerHeight()	Content, padding and border (and margin with true)

console.log($('#box').width());
$('#box').width(300).height(150);

In a real browser these methods give the real size on the screen. They need a layout, so they return 0 in a test tool without a browser engine. We do not run them in our test environment.

css() vs classes

• Class: best for fixed designs. It is easy to change in your CSS file, and the HTML and JavaScript stay clean.
• css(): good for dynamic values, like the size from a slider or a position from a calculation.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.