data-* 속성은 사용자가 html요소에 추가적인 자료를 부여할 때 사용할 수 있으며 자바스크립트에서 사용하다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#display {
font-size: 25px;
text-align: center;
color: red;
}
</style>
<script type="text/javascript">
window.addEventListener('load', function() {
var season = document.querySelector("#season");
var display = document.querySelector("#display");
season.addEventListener("change", function() {
display.innerText = this.options[this.selectedIndex].dataset.season;
});
});
</script>
</head>
<body>
<select id="season">
<option data-season="Spring">봄</option>
<option data-season="Summer">여름</option>
<option data-season="Autumn">가을</option>
<option data-season="Winter">겨울</option>
</select>
<div id="display"></div>
</body>
</html>
See the Pen abmpEOr by Yoo (@spiegel) on CodePen.
반응형
'HTML' 카테고리의 다른 글
| draggable 속성 (0) | 2020.12.18 |
|---|---|
| dir 속성 (0) | 2020.12.18 |
| contenteditable 속성 (0) | 2020.12.13 |
| class 속성 (0) | 2020.12.11 |
| accesskey 속성 (0) | 2020.12.11 |
