In JavaScript, the hasAttribute() method returns a boolean — true if the element has the named attribute, false if it does not (MDN).
Pass the required arguments shown below. Check return values and browser support before you rely on the result.
Call el.hasAttribute. Start with this line.
el.hasAttribute(name)| Call | What it does |
|---|---|
el.hasAttribute(name) | Primary signature. |
el.hasAttribute(...) | Call with the arguments your case needs. |
Built into the browser. Call hasAttribute(...) on an Element — no import required.
el.hasAttribute(name)| Parameter | Description |
|---|---|
| name | Required. string. Attribute name to check (e.g. "disabled") |
| Return Value | Description |
|---|---|
| * | true if present, else false |
MDN-style: ask whether an attribute name is present.
const foo = document.getElementById("foo");
if (foo.hasAttribute("bar")) {
console.log("bar is present");
} else {
console.log("bar is missing");
}getElementById("foo")."bar".true if present, false if not (MDN).Presence matters for disabled — the value can be empty.
const submit = document.getElementById("submit"); // <button disabled>
const reset = document.getElementById("reset"); // no disabled
console.log(submit.hasAttribute("disabled")); // true
console.log(reset.hasAttribute("disabled")); // falsedisabled, checked, required — presence turns them on.disabled returns false.getAttribute()Existence check vs reading the value (or null).
const el = document.getElementById("card"); // data-role="admin" title=""
console.log(el.hasAttribute("data-role")); // true
console.log(el.getAttribute("data-role")); // "admin"
console.log(el.hasAttribute("title")); // true (empty still present)
console.log(el.getAttribute("title")); // ""
console.log(el.hasAttribute("href")); // false
console.log(el.getAttribute("href")); // nullnull.title="" → hasAttribute is true.hasAttribute; read with getAttribute.Element.hasAttribute() is Baseline Widely available (MDN: across browsers since July 2015). Safe to use without a polyfill in modern teaching and production code.
Return true or false depending on whether a named attribute exists on the element.
Bottom line: Use hasAttribute whenever you need a clear existence check before reading or acting on an attribute.
Learn how to check whether a namespaced attribute exists on an element.
11 people found this page helpful