Search
Close this search box.
Search
Close this search box.

CSS jQuery methods

.css( propertyName, value )

Set one or more CSS properties for the set of matched elements.

$('#div').css( "color", "red" );

.removeClass( [className ] )

Remove a single class, multiple classes, or all classes from each element in the set of matched elements.

.addClass( className )

Adds the specified class(es) to each of the set of matched elements.

.height()

Get the current computed height for the first element in the set of matched elements or set the height of every matched element.

The difference between .css( “height” ) and .height() is that the latter returns a unit-less pixel value (for example, 400) while the former returns a value with units intact (for example, 400px). The .height() method is recommended when an element’s height needs to be used in a mathematical calculation.

.height(value)

When calling .height(value), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit. If a string is provided, however, a valid CSS measurement must be provided for the height (such as 100px, 50%, or auto). Note that in modern browsers, the CSS height property does not include padding, border, or margin.

.outerHeight()

Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin. Returns a number (without “px”) representation of the value or null if called on an empty set of elements.

.offset()

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

var offset = $('#div').offset();
console.log( "left: " + offset.left + ", top: " + offset.top );

.offest(coordinates)

The .offset() setter method allows us to reposition an element. The element’s position is specified relative to the document. If the element’s position style property is currently static, it will be set to relative to allow for this repositioning.

$( "#div" ).offset({ top: 10, left: 30 });

.wrap( wrappingElement )

Wrap an HTML structure around each element in the set of matched elements.

$( ".inner" ).wrap( "<div class='new'></div>" );

.wrap( function)

The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element; it should return a DOM element, jQuery object, or HTML snippet in which to wrap the corresponding element. For example:

$( ".inner" ).wrap(function() {
    return "<div class='" + $( this ).text() + "'></div>";
});

.resize()

$( window ).resize(function() {
    // do something
});