a tag에 value값 설정

Web 개발을 하면서 a tag에 value값을 지정할 필요가 생겼습니다.

하지만 https://www.w3schools.com/tags/att_value.asp 에서 확인 가능하듯 a tag엔 value 속성이 없습니다.

그렇다면 value 속성을 통한 data 불러오기가 아닌 다른 방식을 이용해야합니다.

이는 html5에 추가된 custom data를 활용하여 해결할 수 있습니다.

 

html

<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <div class="dropdown-header">Dropdown Header:</div>
    <a class="dropdown-item" id="exId" href="#" data-value="ex1">예제1</a>
    <a class="dropdown-item" id="exId" href="#" data-value="ex2">예제2</a>
</div>

 

js

var lineValue = document.getElementById("exId").getAttribute('data-value');

 

결과

 

비단 a tag 뿐만 아니라 다른 tag에서도 활용가능하다는 점이 큰 메리트입니다.

이에 대한 자세한 설명 및 예제는 

https://www.bsidesoft.com/?p=888

[js] 커스텀데이터 사용하기

해당 블로그에서 확인 가능합니다.

 

공식문서

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#custom-data-attribute

3.2 Elements — HTML5