📌 HTML data-* 속성
- HTML 태그들의 속성명은 전부 지정되어 있다.
- 그렇지만 사용하다보면 개발자들이 직접 속성을 만들고 싶어질 때가 있고, 그때 사용하는 것이 사용자정의 속성이다.
📕 문법
- data-뒤에 붙는 이름은 대문자 포함 불가.
<script>
<태그명 data-*="값"></태그명>
</script>📌 자바스크립트에서 data-* 값 가져오기
1. getAttribute()
- data-* 속성도 태그속성이기 때문에 getAttribute() 메서드로 값을 가져와서 활용할 수 있다.
✏️ 예시
- h1을 클릭하면 해당 [data-index]값을 경고창에 반환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 사용자정의속성</title>
<style>
h1[data-index="0"]{ color: red; }
h1[data-index="1"]{ color: green; }
h1[data-index="2"]{ color: blue; }
</style>
</head>
<body>
<h1 data-index="0">태그1</h1>
<h1 data-index="1">태그2</h1>
<h1 data-index="2">태그3</h1>
<script>
var h1 = document.getElementsByTagName('h1');
for(var i=0;i<h1.length;i++){
h1[i].addEventListener('click',function(){
var index = this.getAttribute('data-index');
alert(index);
});
}
</script>
</body>
</html>_2. dataset
- 자바스크립트는 dataset 속성을 통해 사용자정의 속성값에 쉽게 다가갈 수 있도록 한다. (IE11이상만 사용가능)
📕 문법
- 속성명이 계속 붙어있는 경우, 카멜표기법으로 작성.
<script>
문서객체선택.dataset.속성명;
문서객체선택.dataset[속성명];
</script>✏️ 예시
- 버튼의 사용자속성에 커피명과 금액을 처리하고 클릭 시 주문내역을 반환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS - 사용자정의속성</title>
</head>
<body>
<h3>커피를 주문하세요.</h3>
<button data-coffee-name="아메리카노" data-price="4100">아메리카노</button>
<button data-coffee-name="돌체라떼" data-price="4300">돌체라떼</button>
<button data-coffee-name="바닐라라떼" data-price="4600">바닐라라떼</button>
<hr>
<h3>주문내역</h3>
<p><span id="coffee"></span> : <span id="price"></span>원</p>
<script>
var button = document.getElementsByTagName('button');
var coffee = document.getElementById('coffee');
var price = document.getElementById('price');
for(var i=0;i<button.length;i++){
button[i].addEventListener('click',function(){
var cName = this.dataset.coffeeName; //카멜표기법으로 작성
var cPrice = this.dataset.price;
coffee.textContent = cName;
price.textContent = cPrice;
});
}
</script>
</body>
</html>
중국어랑 코딩하기 (❛ ֊ ❛„)