CSS Class, Attribute, Property and jQuery

In this short post, I will show you how to add/remove attributes or properties to DOM elements and how toadd/remove CSS classes from DOM elements using jQuery. Also, how attribute and properties are different in jQuery.

Before jQuery 1.6 there was no concept of property. Everything was treated as attributes. But now you must be wondering about how attribute and property are different in jQuery. Find out answer at below post,

• When to use .attr() and .prop()
• jQuery .attr() vs .prop()

Properties:

Add Property: The general syntax to add attribute to one or set of DOM elements

1	$("selector").prop("propertyname","value");

Add Multiple Properties: You can also add multiple properties together using prop().

1	$("selector").prop({property1: "value", property2: "value"})

Remove Property:

1	$("selector").removeProp("PropertyName");

 Note: prop and removeProp are available with jQuery 1.6 and its higher version.  

Attributes:

Add Attribute: The general syntax to add attribute to one or set of DOM elements

1	$("selector").attr("attributeName","value");

Add Multiple Attributes: You can also add multiple attribute together using attr().

1	$("selector").attr({attribute1: "value", attribute2: "value"})

Remove Attribute:

1	$("selector").removeAttr("attributeName");

CSS Classes:

Add CSS Class: The general syntax to add css class to one or set of DOM elements

1	$("selector").addClass("classname");

Add Multiple Classes: You can also add multiple CSS classes together using addClass().

1	$("selector").addClass('class1 class2');

Remove CSS Class:

1	$("selector").removeClass("classname");

Remove All CSS Class: To remove all associated CSS classes from element, then don't pass the class name while making a call to removeClass() method.

1	$("selector").removeClass();

Element has the cssClass associated with it:

1	$("selector").hasClass("classname");