HTML DOM setAttribute() Method

HTML DOM toggleAttribute() Method

Last Updated : 21 Jun, 2023

The toggleAttribute() method of the element interface toggles a Boolean attribute on the given element. Attributes of an element can be changed using this method.

Syntax:

Element.toggleAttribute("attribute_name");

Parameters:

Name_of_attribute: Name of the attribute to be toggled. The attribute name is automatically converted to all lower-case when toggleAttribute() is called on an HTML element in an HTML document.

Return Value: It returns true if the attribute name is present, and false otherwise.

Example: In this example, we will toggle the attribute of the input element to readonly. The attribute name is automatically converted to all lower-case when toggleAttribute() is called on an HTML element in an HTML document.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>ToggleAttribute</title>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <input class="input"
           value="This is editable">
    <button onclick="change()">
        Click to change attribute
    </button>
   
    <script>
        function change() {
           let input =
                document.querySelector("input");
            input.toggleAttribute("readonly");
        }
    </script>
   
</body>
 
</html>

Output: In this output, you can see that after clicking on the button, the attribute of the input element changes to “readonly”, Hence it becomes uneditable.

Supported Browsers: The browsers supported by DOM toggleAttribute() method are listed below:

Google Chrome
Firefox
Apple Safari
Opera

HTML DOM setAttribute() Method

taran910

Improve

Article Tags :

Similar Reads

HTML DOM setAttribute() Method

The HTML DOM setAttribute() method is used to get the value of the attribute of the element. By specifying the name of the attribute, it can set the value of that element. If the element is already present then its value is updated. Syntax: Object.setAttribute(attributename,value) Parameters: This m

HTML DOM removeAttribute() Method

The DOM removeAttribute() method is used to remove an attribute with specified name from the element. It is similar to the removeAttributeNode() method but the difference is that the removeAttributeNode method is used to remove the specified attribute object, but on the other hand, removeAttribute r

HTML DOM setAttributeNode() Method

The setAttributeNode() method in HTML DOM is used to add the specified attribute node to an element. If the specified attribute is already present, then this method replaces it. Syntax: element.setAttributeNode(name) Parameter: Only one parameter is accepted name.Where the name is the attribute node

HTML DOM removeAttributeNode() Method

The DOM removeAttributeNode() method is used to remove the specified attribute from the current element. It is similar to removeAttribute() method but the difference is that the removeAttribute method is used to remove the attribute with the specified name, but on the other hand removeAttributeNode

PHP | DOMElement setAttribute() Function

The DOMElement::setAttribute() function is an inbuilt function in PHP which is used to set an attribute with given name to the given value. If the attribute does not exist, it will be created. Syntax: DOMAttr DOMElement::setAttribute( string $name, string $value ) Parameters: This function accepts t

HTML DOM name Property

The DOM name Property is used to return the name of the attribute. It is used for read-only. Syntax: attribute.name Return Value: This property returns a string value that represents the name of the attribute. Example: In this example, we are using DOM name Property for the attribute. C/C++ Code

HTML | DOM ontoggle Event

The ontoggle event in HTML DOM occurs when the <details> element user opens or closes by the user. The <details> tag is used for the content/information which is initially hidden but could be displayed if the user wishes to see it. Supported tags <details> Syntax: In HTML: <elem

Blaze UI Toggles Methods

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to c

Bootstrap 5 Tooltips toggle() Method

Bootstrap 5 Tooltips toggle() method is used to toggle a tooltip's visibility manually. Calling it an odd number of times on a tooltip makes it visible, and calling it an even number of times makes it hidden.Â Syntax:tooltip.toggle()Return Value: The user receives a direct response from this method

jQuery UI | toggle() Method

jQuery UI framework provides toggle() method to display the switch between show or hide functionalities depending on the status of the selected elements and the type of toggle effect chosen by the user. Syntax: (selector).toggle( effectType [, options ] [, duration ] [, complete ] ) Parameters: This