jQuery and CSS

Last Updated Jul 21, 2015, 12:00:06 PM




jQuery addClass() Method

jQuery addClass() method adds more than one specific css class to the each element present in the set of matched elements.

This method doesn’t remove the existing class attributes but extends or adds more Note: If you want to mention more than one css class attribute, you have to separate each class name by comma.


Syntax

The following example illustrates the usage of jQuery addClass() method. In this example, it is going to add two more css class attributes to the existing paragraph tag by calling $( "p:last" ).addClass( "selected highlight" ) where selected and highlight are the css classes defined under the <style> tag.

Example

The above jQuery addClass() method example will produce the following output



Try It Now

jQuery css () Method

The css() method gets one or more style properties for the selected elements.

The jQuery css() method provides simplest way to get the computed style property from the selected element. jQuery takes care of CSS and DOM formatting of multiple word properties that are defined in jQuery css() method.


Syntax

For Example, Both .css( "background-color" ) and .css( "backgroundColor" ) can be understood by jQuery and returns the correct value. Meaning; these mixed case has a special meaning but incase if we provide .css( "WiDtH" ) and .css( "width" ), jQuery ignores and return correct value.

The following example gives the clarity of how to use .css() method.

Example

When you click on each div element it will display the rgb color of that div element.


Try It Now

jQuery hasClass() Method

jQuery hasClass() method is responsible for checking whether the selected HTMLelement matches the specified class name or not.


If the match is found, hasClass() method returns true otherwise It returns false.

Syntax

Consider the below example to check whether selected element matches the class name

Example

Try It Now

jQuery height() Method

jQuery height() method gets the computed height of the matched HTMLelement or Set the height of matched element.


Syntax

The difference between .css( "height" ) and jQuery .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 jQuery .height() method is recommended when an element's height needs to be used in a mathematical calculation.

Here is an example to use the jQuery .height() method.

Example

The above example code will produce the following output

Output


Try It Now

jQuery innerHeight() Method

jQuery innerHeight() method gets the computed inner height of the matched HTMLelement or Set the height of matched element.


Syntax
Example

The above jQuery innerHeight() method will get the inner height of first paragraph

Output

Try It Now

jQuery innerWidth() Method

jQuery innerWidth() method used to get the current computed inner width (including padding but not border) for the first HTML element in the set of matched elements.


Syntax

Here is an example on how to use jQuery innerWidth() Method

Example
Output

Try It Now

jQuery offset() Method

jQuery offset() method allows you to get or set the current coordinates of the first HTMLelement from the matched set of elements in DOM tree.


Syntax

Basically, this method helps us to retrieve the current position of an element which is relative to the DOM.

Here is the example to know how to get coordinates of the element by using jquery offset() method.

Example
Output

Try It Now

jQuery outerHeight() Method

jQuery outerHeight() used to 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.


Syntax
Example

Try It Now

Sources and Credits

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM