문서객체 영역 속성의 종류
※padding, border에 의해 영역이 넓어지기 때문에 순수 가로세로 높이 구하지않음.
| 종류 | 설명 |
| clientHeight | padding을 포함한 높이 |
| clientWidth | padding을 포함한 폭 |
| offsetHeight | border, padding, 스크롤바를 포함한 높이 |
| offsetWidth | border, padding, 스크롤바를 포함한 폭 |
| scrollHeight |
overflow때문에 볼수 없는 높이까지 padding을 포함한 높이 |
| scrollWidth | overflow때문에 볼수 없는 폭까지 padding을 포한한 폭 |
-------------------------------------------------------------------------------------------------------------
dataset
html data-*속성
html 속성명은 지정이 되어있는데 만들고 싶을때 사용자정의 속성을 사용
특히 사용자정의 속성에 지정된 값을 자바스크립트가 편리하게 사용가능
※date-뒤에 붙는 이름은 대문자를 포함할수없음
자바스크립트에서 date-* 값 가져오기
getAttribute()
date-* 이것도 속성 = 메서드 getAttribute로 값을 가져와서 활용
//h1 클릭하면 해당 인덱스값 반환하기
<head>
<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>
//1. 문서객체선택
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>
dataset
//메뉴 버튼을 클릭하면 커피명과 금액이 있는 주문내역 반환
<head>
<style>
h1[data-index="0"]{ color: red; }
h1[data-index="1"]{ color: green; }
h1[data-index="2"]{ color: blue; }
</style>
</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>
//1. 문서객체선택
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>
'코딩 > 자바스크립트' 카테고리의 다른 글
| JS / Day 1 (0) | 2022.04.08 |
|---|---|
| JS / 드림코딩 유튜브강의 노트 (0) | 2022.04.08 |
| JS / 에러, 클래스 (0) | 2022.04.05 |
| JS / 정규표현식 RegExp (0) | 2022.04.05 |
| JS / DOM Node와 Forms (0) | 2022.04.05 |