Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Test if the HTML attribute tabindex is present and get the value
To test if the HTML attribute tabindex is present and get its value, you can use jQuery's attr() method or JavaScript's hasAttribute() method.
Using jQuery attr() Method
The attr() method returns the attribute value if it exists, or undefined if the attribute is not present:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="demo">Element with tabindex</div>
<div id="demo2">Element without tabindex</div>
<script>
// Get tabindex value
let tabindexValue = $("#demo").attr("tabindex");
console.log("Tabindex value:", tabindexValue);
// Test if tabindex exists
let hasTabindex = $("#demo").attr("tabindex") !== undefined;
console.log("Has tabindex:", hasTabindex);
// Test element without tabindex
let noTabindex = $("#demo2").attr("tabindex");
console.log("No tabindex:", noTabindex);
</script>
</body>
</html>
Tabindex value: 5 Has tabindex: true No tabindex: undefined
Using JavaScript hasAttribute() Method
The hasAttribute() method returns true if the attribute exists, false otherwise:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button id="btn1" style="background-color:blue;">Button with tabindex</button>
<button id="btn2">Button without tabindex</button>
<script>
$(document).ready(function(){
$('button').on('click', function() {
if (this.hasAttribute("tabindex")) {
let value = this.getAttribute("tabindex");
alert('Has tabindex with value: ' + value);
} else {
alert('No tabindex attribute');
}
});
});
</script>
</body>
</html>
Comparison of Methods
| Method | Returns | Best For |
|---|---|---|
$(element).attr("tabindex") |
Value or undefined | Getting attribute value |
element.hasAttribute("tabindex") |
true or false | Checking if attribute exists |
Complete Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="element1">Focusable element</div>
<div id="element2">Regular element</div>
<button onclick="checkTabindex()">Check Tabindex</button>
<script>
function checkTabindex() {
// Check first element
let elem1 = document.getElementById("element1");
if (elem1.hasAttribute("tabindex")) {
let value = elem1.getAttribute("tabindex");
console.log("Element1 tabindex:", value);
}
// Check second element
let elem2 = document.getElementById("element2");
if (!elem2.hasAttribute("tabindex")) {
console.log("Element2 has no tabindex");
}
}
</script>
</body>
</html>
Conclusion
Use hasAttribute() to check if tabindex exists, and attr() or getAttribute() to retrieve its value. Both methods are reliable for testing HTML attribute presence.
Updated on: 2026-03-15T23:18:59+05:30
527 Views
Advertisements