How to Get and Set Element Attributes using jQuery

How to Get and Set Element Attributes using jQuery

Some of the simplest and most common, operations on jQuery objects are those that get or set the value of HTML attributes, CSS styles, element content, or element geometry. In this post I am going to describe the methods to get or set HTML element attributes using jQuery.

How to Get and Set HTML Attributes using jQuery


You can get or set HTML attributes using attr() method in jQuery. The attr() method handles browser incompatibilities and special cases and allows you to use either HTML attributes names or their JavaScript property equivalents.

Here are some examples of uses of attr() method for getting or setting HTML attributes.

$("form").attr("action");  
// It gets the action attribute from the first form.

$("#icon").attr("src", "icon.gif");  
// It sets the src attributes for image with id icon.

$("a").attr("target", "_blank");  
// It set the target attributes for all links to load in new windows 

$("a").attr("target", function(){
 if(this.host==location.host) return "_self"
 else return "_blank";
});

This function sets the attribute of all external links load in new windows and internal links load in the same window.

There is another method related to attr() is removeAttr(), which is related function that completely removes an attributes from all selected elements.

Here an example of uses of removeAttr() method for removing HTML attributes.

$("a").removeAttr("target");

It removes the target attribute of link and makes all links load in the same window.

How to Get and Set CSS Attributes using jQuery


The css() method is very much like attr() method, but is works with the CSS styles of an element rather than the HTML attributes of the element.

When querying style values, css() returns the current style of the element and the returned value may come from the style attribute or from a style-sheet.

Here are some examples getting and setting CSS attributes using attr() method.

$("h1").css("font-weight"); 
// It gets font weight of first 

$("h1").css("font-variant", "smallcaps"); 
// It sets font-variant property of 
 to smallcaps.

$("h1").css({backgroundColor:"black",textColor:"white",
 fontVariant:"small-caps", padding: "10px 2px 4px 20px", 
 border:"dotted black 4px"});   
// It sets multiple styles at once for

How to Get and Set CSS Classes using jQuery


jQuery defines convenience methods for working with the class attribute. addClass() and removeClass() add and remove classes from the selected elements. toogleClass() adds classes to elements that don't already have them and removes classes from those that do. hasClass() tests for the presence of a specified class.

Here are are some examples for adding css classes, removing css classes, toggling css classes and testing css classes.

Adding CSS Classes

$("h1").addClass("hilite");  
// It adds a class to all 
 elements

$("h1+p").addClass("hilite first"); 
// It adds two classes to elements after 


$("section").addClass(function(n){return "scetion"+n;}); 
// It passes a function to add a custom class to each matched element

Removing CSS classes

$("p").removeClass("hilite");  
// It removes a class from all p elements

$("p").removeClass("hilite first"); 
// It removes two classes from 
 elements

$("section").removeClass(function(n){return "scetion"+n;}); 
// It passes a function to remove a custom class to each matched element

Toggling CSS Classes

$("tr:odd").toggleClass("oddrow"); 
// It adds the class if it is not there or remove if it is.

$("h1").toggleClass("big bold");   
// It toggles two classes at once. 

$("h1").toggleClass(function(n){
return "big bold h1-" +n; });  
// It toggles a computed class or classes.

$("h1").toggleClass("hilite", true); 
// It works like addclass

$("h1").toggleClass("hilite", false); 
// It works like removeclass

Testing CSS Classes

$("p").hasClass("first")  
// It tests any p element have class first

$("#lead").is("first") 
// It test any element with id lead have class first

The hasClass() method is less flexible than addclass(), removeClass, and toggleClass(). hasClass() works for only a single class name and does not support function arguments. It returns true if any of the selected elements has the specified CSS class and returns false if none of them do. The is() method is more flexible and can be used for the same purpose.

How to Get and Set HTML Form Values Using jQuery


For setting and querying the value attribute of HTML form elements val() method is used and it is also used for querying and setting the selection state of check-boxes, radio buttons, and select elements. Here are some examples of getting and setting HTML form values using val() method. 

$("#firstname").val()  
// It gets value from the firstname text field.

$("select #extras").val() 
// It gets array of values from