JavaScript Element toggleAttribute() Method

Beginner
5 min read
Updated: Nov 2026
3 examples
Method
Decorative image with the word TOGGLEATTRIBUTE

Definition

Element.toggleAttribute() toggles a Boolean attribute: removes it if present, or adds it if missing (MDN). Ideal for flags like disabled, hidden, or readonly. Returns true if the attribute is present after the call, else false.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call el.toggleAttribute. Start with this line.

JavaScript
element.toggleAttribute(name)
CallWhat it does
element.toggleAttribute(name)Primary signature.
el.toggleAttribute(...)Call with the arguments your case needs.

Built into the browser. Call toggleAttribute(...) on an Element — no import required.

Library declarations
JavaScript
element.toggleAttribute(name)

Parameters

ParameterDescription
nameRequired. Attribute to toggle (lowercased on HTML elements)
forceOptional. true add · false remove · omit = flip

Return Value

Return ValueDescription
*true if present after call, else false

JavaScript Examples

Example 1 — Toggle disabled (MDN)

Flip a boolean attribute with one call.

JavaScript
const button = document.querySelector("button");
const input = document.querySelector("input");

button.addEventListener("click", () => {
  input.toggleAttribute("disabled");
});
Try It Yourself

How It Works

  1. Click the button. The handler runs.
  2. Call toggleAttribute("disabled"). Presence flips.
  3. First click adds it. The input becomes disabled.
  4. Next click removes it. The input is editable again.

Example 2 — Force Add or Remove

Pass force when you know the desired end state.

JavaScript
const input = document.querySelector("input");

input.toggleAttribute("disabled", true);   // ensure on
console.log(input.hasAttribute("disabled")); // true

input.toggleAttribute("disabled", false);  // ensure off
console.log(input.hasAttribute("disabled")); // false
Try It Yourself

How It Works

  1. force: true adds the attribute (idempotent).
  2. force: false removes it (idempotent).
  3. No flip surprise. Useful when state comes from your app logic.
  4. Same API as toggle — no need to call set/remove separately.

Example 3 — Use the Return Value

The return value tells you if the attribute is present afterward.

JavaScript
const input = document.querySelector("input");
const label = document.getElementById("status");

const on = input.toggleAttribute("disabled");
label.textContent = on ? "disabled" : "enabled";
Try It Yourself

How It Works

  1. Toggle runs. Attribute is added or removed.
  2. Return is a boolean. true = present now.
  3. Update UI from that value. No extra hasAttribute needed.
  4. Clearer than guessing the previous state yourself.
Compatibility

Browser Support

Element.toggleAttribute() is Baseline Widely available on MDN (across browsers since October 2018). Safe to use for boolean attribute toggles in modern apps.

✓ Baseline Widely available

Element.toggleAttribute()

Toggle boolean attributes — widely supported since 2018.

Wide Baseline
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
toggleAttribute() Widely available

Bottom line: Use toggleAttribute(name) to flip flags like disabled. Pass force true/false when you need a definite end state. Returns whether the attribute is present afterward.

Frequently Asked Questions

It toggles a Boolean attribute on the element: removes it if present, or adds it if not present (MDN).
No. MDN marks Element.toggleAttribute() as Baseline Widely available (across browsers since October 2018). It is not Deprecated, Experimental, or Non-standard.
true if the attribute is present after the call, and false otherwise (MDN).
Optional boolean. If true, the attribute is added. If false, it is removed. If omitted, the attribute is toggled (MDN).
toggleAttribute() flips presence in one call and returns whether the attribute is present. setAttribute() always sets a value; removeAttribute() always removes. Use force true/false for set-or-remove with the same API.
On an HTML element in an HTML document, the name is automatically converted to lower-case (MDN).

Next: scroll()

Learn how to scroll an element to a position or options object.

scroll tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

22 people found this page helpful

JavaScript Element startViewTransition() Method JavaScript Element scroll() Method