• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 

결과보기

 

 


분류 제목
DOM_Event JS - paste -
DOM_Event JS - pause -
DOM_Event JS - play -
DOM_Event JS - playing -
DOM_Event JS - popstate -
DOM_Event JS - progress -
DOM_Event JS - ratechange 이벤트 - 재생 속도 변경 이벤트 (= ratechange이벤트 = 레이트체인지…
DOM_Event JS - resize 이벤트 (= onresize 속성) - 윈도우 창크기 변경 조정 (= resize이벤트…
DOM_Event JS - reset -
DOM_Event JS - scroll 이벤트 (= onscroll 속성) ★ - 스크롤이벤트
DOM_Event JS - search 이벤트 (= onsearch 속성) - 검색이벤트 (IE와 FireFox는 지원 X)
DOM_Event JS - seeked -
DOM_Event JS - seeking -
DOM_Event JS - select 이벤트 (onselect 속성) = 텍스트 선택 (= select이벤트 = 실렉트이벤트…
DOM_Event JS - show 이벤트 (= onshow 속성) - <menu> 요소가 상황에 맞는 메뉴로 표시 될 때 발…
DOM_Event JS - stalled 이벤트 - 브라우저가 미디어 데이터 사용 불가 시 실행. (= 스톨드 이벤트)
DOM_Event JS - storage -
DOM_Event JS - submit 이벤트 (= onsubmit 속성) - 제출/전송 이벤트 (= 서브밋 이벤트 = 서브미…
DOM_Event JS - suspend 이벤트 (onsuspend 속성) - 브라우저가 의도적으로 미디어 데이터 안 가져올 …
DOM_Event JS - timeupdate 이벤트 - 오디오/비디오 재생 위치 변경 발생 (= timeupdate이벤트 =…
34/67
목록
찾아주셔서 감사합니다. Since 2012