[HTML/Javascript]Data속성 사용하기
안녕하세요 미나라이입니다.
이번에는 HTML5에서부터 사용 할 수 있는 data속성에 대해서 정리해보았습니다.
데이터 속성이란?
데이터 속성은 HTML요소의 "data"로 시작하는 요소입니다. 구분점은 -로 되어있고 HTML태그 요소 안에
데이터를 저장해두고 싶을 때 주로 사용합니다.
데이터 속성을 사용하지 않았을 경우
input[button]속성의 경우에는 value에 버튼의 이름이 들어가서 데이터를 저장 해 둘 수가 없습니다.
그렇기 때문에 hidden태그를 정의해서 데이터 요소를 숨겨놓는 방법을 많이 사용했었습니다.
<input class="btn0" type="button" value="Button" />
<input class="btn0" type="hidden" value="data0" />
데이터 속성을 사용 할 경우
아래처럼 data속성을 사용해서 해당 요소 안에도 데이터를 저장 해 둘 수 있어서
불필요한 태그가 늘어날 염려가 줄어듭니다.
대신 data속성의 값을 추출해서 서버로 보내고 싶은 경우에는 Javascript로 데이터를 취득해서
form에 셋팅 해 주어야 합니다.
<input id="btn" type="button" value="Button" data-value="data0" />데이터 속성 활용하기
데이터 속성에 선언된 값 취득 및 출력하기
데이터 속성은 DOM객체으이 dataset속성을 이용해서 추출 할 수 있습니다.
<input id="btn0" type="button" onclick="btnClick(0)" value="Button" data-common="cmn0" data-value0="btn0" />
<script>
function btnClick(idx) {
let btnData = document.querySelector("#btn" + idx);
let data = document.querySelectorAll("[data-common]");
// data속성값 출력
console.log(btnData.dataset['value' + idx]);
console.log(data[idx].dataset.common);
}
</script>출력 결과
|
btn0
cmn0 |
데이터 속성에 선언된 값 변경하기
<input id="btn0" type="button" onclick="btnClick(0)" value="Button" data-common="cmn0" data-value0="btn0" />
<script>
function btnClick(idx) {
let btnData = document.querySelector("#btn" + idx);
let data = document.querySelectorAll("[data-common]");
// data속성값 변경
btnData.dataset['value'+ idx] = "btn2";
console.log(btnData.dataset['value' + idx]);
// 변경된 속성값 출력
console.log(btnData.dataset['value' + idx]);
console.log(data[idx].dataset.common);
}
</script>출력 결과
| btn2 |
CSS에서 데이터 속성 선택하기
<table>
<tr>
<td>
<label>Button 1 : </label>
<input id="btn0" type="button" onclick="btnClick(0)" value="Button" data-common="cmn0" data-value0="btn0" />
</td>
</tr>
<tr>
<td>
<label>Button 2 : </label>
<input id="btn1" type="button" onclick="btnClick(1)" value="Button" data-common="cmn1" data-value1="btn1" />
</td>
</tr>
</table>
<style>
[data-common] {
background-color: yellow;
}
#btn0[data-common] {
color: red;
}
</style>출력 이미지
전체 샘플 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dataAttribute</title>
<script>
function btnClick(idx) {
let btnData = document.querySelector("#btn" + idx);
let data = document.querySelectorAll("[data-common]");
// data속성값 취득
console.log(btnData.dataset['value' + idx]);
console.log(data[idx].dataset.common);
// data속성값 변경
btnData.dataset['value'+ idx] = "btn2";
console.log(btnData.dataset['value' + idx]);
}
</script>
<style>
[data-common] {
background-color: yellow;
}
#btn0[data-common] {
color: red;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td>
<label>Button 1 : </label>
<input id="btn0" type="button" onclick="btnClick(0)" value="Button" data-common="cmn0" data-value0="btn0" />
</td>
</tr>
<tr>
<td>
<label>Button 2 : </label>
<input id="btn1" type="button" onclick="btnClick(1)" value="Button" data-common="cmn1" data-value1="btn1" />
</td>
</tr>
</table>
</form>
</body>
</html>728x90
반응형
'Web > JavaScript&JQuery' 카테고리의 다른 글
| [Javascript]자바스크립트 배열 활용법 정리(2/2) (0) | 2022.03.27 |
|---|---|
| [Javascript]자바스크립트 배열 활용법 정리(1/2) (0) | 2022.03.27 |
| [Javascript]자바스크립트 Object활용법 정리 (0) | 2022.03.26 |
| [Javascript]자바스크립트 함수 정리 (2) | 2022.01.05 |
| [Javascript]자바스크립트 변수 정리 + Hoisting (1) | 2022.01.03 |
