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

[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 - clientY -
DOM_Event JS - clipboardData 속성 - 클립보드에 넣을 데이터 지정 (= clipboardData속성 =…
DOM_Event JS - code -
DOM_Event JS - composed 속성 - 이벤트객체구성여부반환 (= 컴포우즈드속성)
DOM_Event JS - createEvent() 메서드 -
DOM_Event JS - ctrlKey 속성 - Ctrl키 눌림여부반환 (= 컨트롤키코드)
DOM_Event JS - currentTarget -
DOM_Event JS - data -
DOM_Event JS - dataTransfer 속성 ★ - (drag/drop 또는 insert/delete)된 데이터 포…
DOM_Event JS - defaultPrevented 속성 - 이벤트에 preventDefault() 메서드가 호출되었는지…
DOM_Event JS - deltaX 속성 - 마우스휠 이벤트 시, 가로 스크롤량 (= deltaX속성 = 델타엑스 속성)
DOM_Event JS - deltaY 속성 ★ - 마우스휠 이벤트 시, 세로 스크롤량 (= deltaY속성 = 델타와이 속성…
DOM_Event JS - deltaZ 속성 - 마우스휠 이벤트 Z축 방향 스크롤량 (= deltaZ속성 = 델타제트 속성 =…
DOM_Event JS - deltaMode -
DOM_Event JS - detail 속성 - 사용자 이벤트 상세정보 반환 (= 이벤트 상세내용 확인 = detail속성 =…
DOM_Event JS - elapsedTime -
DOM_Event JS - elapsedTime -
DOM_Event JS - eventPhase -
DOM_Event JS - getTargetRanges() 메서드 -
DOM_Event JS - getModifierState() 메서드 -
36/67
목록
찾아주셔서 감사합니다. Since 2012