In this tutorial you can learn how to Add, Cange, and Remove Attributes (like id, class, href, disabled, etc.) in HTML elements using jQuery.
All these actions can be performed using the attr(), and removeAttr() jQuery methods.
Add attribute
To add an attribute to a HTML element /or elements (
any attribute, id, class, href, selected, etc.), apply this syntax:
$('element').attr('attribute_name', 'attribute_value');
Examples:
- Add the attribute
id="value" to the clicked DIV:
$('div').click(function() { $(this).attr('id', 'value'); });
- Add
disabled attribute to submit button with
id="submit1":
$('submit#submit1').attr('disabled', 'disabled');
- Select the last Option in the Select lists with
class="cls" (by adding "selected" to that option):
$('select.cls option:last).attr('selected', 'selected');
- Add
class="value" to even <li> within HTML tag with
id="idtag":
$('#idtag li:even').attr('class', 'value');
• The
class attribute can also be added with the jQuery method
addClass().
Syntax:
$('element').addClass('attribute_name', 'attribute_value');
Example:
- Add the class "cls" to clicked DIV:
$('div').click(function() { $(this).addClass('cls'); });
• Another useful jQuery method for working with
class attribute is
toggleClass(). This function adds or removes one or more classes from each element in the set of matched elements. If an element in the matched set of elements already has the class, then it is removed; if an element does not have the class, then it is added.
- For example, toggle class "cls" to the clicked DIV:
$('div').click(function() { $(this).toggleClass('cls'); });
Change Attribute value
To change the value of an attribute, use the
attr() method with this syntax:
$('element').attr('attribute_name', 'new_value');
Examples:
- Change the image of the IMG element with
id="img1" (by changing the value of the "src" attribute):
$('img#img1').attr('src', 'new_image.jpg');
- Change the URL of the first link (<a>) in the HTML tag with
id="idtag"
$('#idtag a:first').attr('href', 'http://www.courses.net');
- Change the file address added in the
action of the form with
id="frm1":
$('form#frm1').attr('action', 'other_file.php');
Remove attributes
To remove an attribute to a HTML element /or elements (
any attribute, id, class, href, selected, etc.), apply
removeAttr() method with this syntax:
$('element').removeAttr('attribute_name');
Examples:
- Remove the ID of the clicked DIV:
$('div').click(function() { $(this).removeAttr('id'); });
- Remove
disabled attribute to submit button with
id="submit1":
$('submit#submit1').removeAttr('disabled');
- Remove class to even <li> within HTML tag with
id="idtag":
$('#idtag li:even').removeAttr('class');
• The class attribute can also be removed with the
removeClass() jQuery method.
For example, remove the class attribute of the clicked DIV:
$('div').click(function() { $(this).removeClass(); });
- If you specify a parameter to
removeClass() function, with the value of a class, will be removed only that class (useful if the matched element/s has multiple classes), otherwise removes al classes of that element.
The type attribute of the <input> form fields can't be removed or changed.
