HTML DOM toggleAttribute() Method Last Updated : 21 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 ChromeFirefoxApple SafariOpera Comment More infoAdvertise with us Next Article HTML DOM removeAttributeNode() Method T taran910 Follow Improve Article Tags : JavaScript HTML-DOM HTML-Methods Similar Reads 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 1 min read 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 1 min read 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 1 min read 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 1 min read HTML | DOM Style visibility Property The Style visibility property in HTML DOM used to set the visibility for an element. It is used to hide or show the element. It returns the visibility property that is given to an element. Syntax: It returns the visibility property.object.style.visibilityIt is used to set the visibility property. ob 2 min read HTML DOM isContentEditable Property The DOM isContentEditable property is used to return a boolean where true means the content of an element is editable and false represents content is not editable. This property is read-only. Syntax: Object.isContentEditable Return Value: This property returns a boolean value. true means that the co 1 min read Like