<div class="...">
처럼 클래스 추가하기<div style="...">
처럼 프로퍼티를 style
에 바로 써주기
let top = /* 복잡한 계산식 */;
let left = /* 복잡한 계산식 */;
elem.style.left = left; // 예시: '123px', 런타임으로 좌표를 계산할 수 있음.
elem.style.top = top; // 예시: '456px'
element.className
에 무언가를 대입하면 class 문자열 전체가 바뀐다.<!-- 변경 전 -->
<div class="greeting title">
<h1>Hello World!</h1>
</div>
<!-- 변경 후 -->
<div class="hello">
<h1>Hello World!</h1>
</div>
div.className = 'hello';
element.classList.add/remove('class명')
: class를 추가하거나 제거element.classList.toggle('class명')
: class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가element.classList.contains('class명')
: class 존재 여부에 따라 true/false를 반환element.classList.add('className')
<!-- 변경 전 -->
<div class="greeting title">
<h1>Hello World!</h1>
</div>
<!-- 변경 후 -->
<div class="greeting title hello">
<h1>Hello World!</h1>
</div>
div.classList.add('hello');
element.classList.remove('className')
<!-- 변경 전 -->
<div class="greeting title">
<h1>Hello World!</h1>
</div>
<!-- 변경 후 -->
<div class="greeting">
<h1>Hello World!</h1>
</div>
div.classList.remove('title');
element.classList.toggle('className')
인자가 하나만 있을 때
element.classList.toggle('className');
<!-- 실행 전 -->
<button class="hello" onclick="buttonClicked()">button</button>
<!-- 실행 후 -->
<button class="hello clicked" onclick="buttonClicked()">button</button>
<!-- 재실행 -->
<button class="hello" onclick="buttonClicked()">button</button>
funtion buttonClicked() {
button.classList.toggle('clicked');
}
두번째 인자가 존재 할 때
element.classList.toggle('className', true or false);
<!-- 실행 전 -->
<button class="hello" onclick="buttonClicked()">button</button>
<!-- 실행 후 -->
<button class="hello clicked" onclick="buttonClicked()">button</button>
funtion buttonClicked() {
button.classList.toggle('clicked', true);
}
element.classList.contains('className')
<div class="title greeting">
<h1>Hello World!</h1>
</div>
div.classList.contains('hello'); // false
div.classList.contains('title'); // true
element.classList.replace('className')
<!-- 변경 전 -->
<div class="title greeting">
<h1>Hello World!</h1>
</div>
<!-- 변경 후 -->
<div class="title hello">
<h1>Hello World!</h1>
</div>
div.classList.replace('greeting', 'hello');
https://hianna.tistory.com/469