Modifying Attributes and Properties in jQuery With Example

Modifying Attributes and Properties

jQuery’s core feature of modifying the attributes and properties of HTML elements on a web page enables dynamic modifications to the look and behaviour of a document. For this,.attr() is the main method. Modifying jQuery attributes and properties is essential for dynamically changing web page content and look. DOM properties are accessible and altered by JavaScript, while HTML attributes are supplied in the HTML (id, rel, href). These two usually have discrepancies handled by jQuery.

Understanding Attributes and Properties

Recognising Properties and Attributes The difference between HTML attributes and DOM properties is small but significant.

In the HTML code of a page, attributes are the values enclosed in quotes. Src and alt are properties, for example.

Attributes: Properties are the values that JavaScript can access and change. Some DOM properties, such nodeName or childNodes, have no equivalent attribute, although many attributes have comparable properties (for example, the class attribute corresponds to the className property). The types of data can also vary; for instance, the checked property has a Boolean value, whereas the checked attribute has a text value.

Properties: These naming discrepancies are often handled for you by jQuery, which makes attributes and properties functionally equivalent in the majority of situations. For consistent cross-browser behaviour, use.prop() for Boolean attributes like checked instead of.attr().

Using the .attr() Method

The.attr() Method The versatile.attr() method can dynamically change an element’s attributes.

Getting a value: By passing the attribute name as a string parameter, you may easily request the value of an attribute. Consider $(‘image’).An image element’s src attribute value would be returned by attr(‘src’).

Setting a single value: For varied manipulation purposes, jQuery has numerous methods for setting a single value for an element’s attribute, property, or content. Use attr() to dynamically change an attribute’s value. Setting one property requires two string parameters: its name and its new value.

Setting multiple values: An object of key-value pairs with the attribute name as the key and the new string as the value can be given to change multiple values.

Value Callbacks: The.attr() method accepts functions as value parameters. For each element in the matched set, this “value callback” function is called once, and the new attribute value is determined by the return value. The oldValue of the attribute and an integer representing the iteration count (index) are passed to the function. The DOM element that is presently being altered is referenced by the this keyword inside this callback.

Related Methods for Attribute and Property Manipulation

A method for removing an attribute from an element is.removeAttr().
The.prop() method was first introduced in jQuery 1.6 and is specifically made for retrieving and modifying DOM properties. Its capabilities, like receiving an object for multiple values or value callback functions, are comparable to those of.attr(). It is advised for checked and other Boolean properties.
To avoid data conflicts between HTML attributes and DOM properties,.val() gets or changes form control values including text inputs, select elements, radio buttons, and checkboxes.

Code Example for Changing Attributes Dynamically

The following example demonstrates dynamically modifying tag’s src and alt attributes.

<!DOCTYPE html>
<html>
<head>
  <title>My Test Page</title>
  <!-- Load jQuery library -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
       $("#toggleImageButton").click(function(){
        $('img').attr({
          src: 'https://via.placeholder.com/300x200.png?text=Cover+2',
          alt: 'cover2'
        });
      });
    });
  </script>
</head>
<body>
  <strong>This is my test page.</strong><br><br>
  <img src="https://via.placeholder.com/300x200.png?text=Cover+1" alt="cover1" /><br><br>
  <button id="toggleImageButton">Change Image</button>
</body>
</html>

Output:

This is my test page.
cover1 
Change Image

In the above output when you click on change image, Image of the output will change to cover2.

In this example:

$(document).ready(), jQuery code can only be run when the DOM is fully created.
A button is configured to initiate a click event using the ID toggleImageButton.
All elements on the page are selected when the button is pressed using $(‘img’).
The object {src: ‘images/cover2.jpg’, alt: ‘cover2’} is then used to invoke the.attr() method. This dynamically adjusts the chosen element(s)’s alt and src attributes to the updated values. There is no need to restart the entire page because this occurs instantly.

Page Content

Tutorials

Modifying Attributes and Properties in jQuery With Example