class _ offset

<article class="offset2">
    <h2>Offset</h2>
    <figure>
       	<div></div>
        <div></div>
    	<div></div>
    </figure>
	<p></p>
</article>
<style>
*{box-sizing: border-box;}
.offset2 {position: relative;}
.offset2 figure, h2 {margin: 0;}
.offset2 figure div {width: 100px; height: 100px; margin: 0 auto; background: #edf;}
.offset2 figure div:nth-of-type(2) {background: #fed;} 
.offset2 p {position: absolute; border: 10px solid #f00; margin: 0; left: 0; top: 0; width: 0; height: 0; transition: 1.5s;}
</style>
<script>
function init2(){
	const elOffset2 = document.querySelectorAll('.offset2 > figure > div');
    const elPtag2 = document.querySelector('.offset2 > p');
    
    elOffset2.forEach(function(value){
    	value.onclick = function(){
        	elPtag2.style = `width:${this.offsetWidth}px; height: ${this.offsetHeight}px; left: ${this.offsetLeft}px; top: ${this.offsetTop}px;`;
    	}
	})
}
window.addEventListener('load',init2);
</script>

선택자.classList.add(); //추가
선택자.classList.toggle(); //클래스 없으면 넣어주고 있다면 삭제한다.
선택자.classList.remove(); //클래스 삭제
선택자.classList.cotains(); //클래스의 존재 유무에 따라 true, false 반환

//한개의 클래스만 제어할 수 있음
선택자.className //클래스의 이름을 가져옴
선택자.className = 'active' //선택자의 클래스를 active로 변경