[DOM_Element] JS - className 속성 ★★★ = 요소의 클래스명 반환/설정. (= className속성 = 클래스네임)

※ Element.className = 'class names' : 기존에 class가 없으면 추가해 넣고, 있으면 기존 것을 변경.

※ Element.classList.add('class names') : 기존 class에 새로운 클래스를 추가.

className 예제

 

<style>

.box {

  width: 300px;

  height: 100px;

  line-height:100px;

  background-color: tomato;

  text-align: center;

  font-size: 25px;

  color: white;

  margin-bottom: 10px;

}

</style>

<div id="hz">

   홈짱닷컴 Homzzang.com

</div>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("hz").className = "box";

}

</script>

 

결과보기