HTML 요소의 tabindex 속성 값을 가져오려면 jQuery의 attr() 메서드를 활용할 수 있습니다.
$("#demo").attr("tabindex")
attr() 메서드는 선택한 요소 집합 중 첫 번째 요소에서 속성 값을 읽어오거나, 일치하는 모든 요소에 속성 값을 설정할 때 사용됩니다. 즉, 값을 조회하는 용도와 설정하는 용도 모두로 활용할 수 있습니다.
속성 값을 가져오는 것과 별개로, 특정 요소에 해당 속성이 존재하는지 여부만 확인하고 싶다면 자바스크립트의 hasAttribute() 메서드를 사용하는 것이 좋습니다. 이 메서드는 속성이 있으면 true, 없으면 false를 반환합니다.
예제
다음 코드를 실행하면 hasAttribute() 메서드의 동작 방식을 직접 확인할 수 있습니다. 버튼을 클릭하면 해당 버튼에 style 속성이 있는지 검사한 후, 그 결과를 알림 창으로 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('button').on('click', function() {
if (this.hasAttribute("style")) {
alert('True')
} else {
alert('False')
}
})
});
</script>
</head>
<body>
<button class = 'button' style = 'background-color:blue;'>
Button
</button>
<button class = 'button'>
Button 2
</button>
</body>
</html>
코드 설명
- 첫 번째 버튼:
style속성(배경색 파란색)이 지정되어 있으므로 클릭 시True가 표시됩니다. - 두 번째 버튼:
style속성이 없으므로 클릭 시False가 표시됩니다.
이처럼 attr()과 hasAttribute()를 적절히 조합하면 요소의 속성 값을 읽어오고, 속성의 존재 여부를 안전하게 판별할 수 있습니다.