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

[DOM_Element] JS - scrollHeight 속성 - 스크롤높이 (= scrollHeight속성 = 스크롤하이트속성) (※ padding 포함 / border, scrollbar, margin 제외) ※ 스크롤 세로길이 (= 지정요소 내부의 내용이 모두 표시될 때의 전체 높이)

scrollHeight 예제

 

<style>

#box {

  height: 250px;

  width: 250px;

  overflow: auto;

}


#content {

  height: 1000px;

  width:750px ;

  padding: 50px;

  background-color: tomato;

}

</style>


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


<div id="box">

  <div id="content">홈짱닷컴 Homzzang.com</div>

</div>


<p id="demo"></p>


<script>

function homzzang() {

  var content = document.getElementById("content");

  var y = content.scrollHeight;

  var x = content.scrollWidth;

  document.getElementById ("demo").innerHTML = "Height: " + y + "px<br>Width: " + x + "px";

}

</script>

 

결과보기


 


분류 제목
DOM_Event JS - dblclick 이벤트 (= ondblclick 속성) ★ - 마우스더블클릭이벤트
DOM_Event JS - drag 이벤트 (= ondrag 속성) - 마우스드래그이벤트 (IE9) ※ 드래그앤드롭
DOM_Event JS - dragend 이벤트 (= ondragend 속성) - 마우스드래그종료 (IE9)
DOM_Event JS - dragenter 이벤트 (= ondragenter 속성) - 드래그진입 (= 드래그엔터이벤트)
DOM_Event JS - dragleave -
DOM_Event JS - dragover 이벤트 (= ondragover 속성) -
DOM_Event JS - dragstart 이벤트 (= ondragstart 속성) - 마우스드래그시작 (IE9)
DOM_Event JS - drop 이벤트 (= ondrop 속성) -
DOM_Event JS - durationchange -
DOM_Event JS - ended -
DOM_Event JS - error 이벤트 (= onerror 속성) - 외부파일로드 중 에러발생시 실행 (= 에러 이벤트 …
DOM_Event JS - focus 이벤트 (= onfocus 속성) - 포커스이벤트발생
DOM_Event JS - focusin 이벤트 (= onfocusin 속성) - 해당요소(또는 자식요소) 포커스 될 때 이벤…
DOM_Event JS - focusout 이벤트 (= onfocusout 속성) - 해당요소(또는 자식요소) 포커스 잃을 때…
DOM_Event JS - fullscreenchange -
DOM_Event JS - fullscreenerror -
DOM_Event JS - hashchange -
DOM_Event JS - input 이벤트 (= oninput 속성) ★ - 입력이벤트 (= 인풋이벤트) (IE9)
DOM_Event JS - invalid -
DOM_Event JS - keydown 이벤트 (= onkeydown 속성) ★ - 키보드키누르기 (= 키보드키누름 = 키다…
32/67
목록
찾아주셔서 감사합니다. Since 2012