[DOM_Style] JS - resize 속성 - 사용자의 요소크기 조정가능여부 지정 (IE는 지원 X)

resize 예제

 

<style> 

#hz {

  border: 1px solid gray;

  background-color: yellow;

  width: 200px;

  overflow: auto;

}

</style>

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

<div id="hz">

  <p>홈짱닷컴 Homzzang.com</p>

</div>

<script>

function homzzang() {

  document.getElementById("hz").style.resize = "both";

}

</script>

 

결과보기

※ 버튼 클릭 시, 요소 크기를 드래그로 조정 가능.

resize 정의

 

사용자의 요소크기 조정가능여부 지정.

 

---

 

1.

overflow 속성 이용해 가시영역 벗어나는 내용 처리.

2. 

IE 제외한 모든 브라우저 모두 지원.

 

3.

기본값 : none
반환값 : 요소의 resize 속성 표시 문자열
CSS버전: CSS3

 

resize 구문

 

[반환]

object.style.resize

 

---

 

[설정]

object.style.resize = "none|both|horizontal|vertical|initial|inherit"

 

---

 

[속성값]

 

none

기본값. 사용자는 요소크기 조정 불가.

 

both

사용자가 요소너비와 높이 둘 다 조정 가능.

 

horizontal

사용자가 요소너비만 조정 가능.

 

vertical

사용자가 요소높이만 조정 가능.

 

initial

이 속성의 기본값으로 설정.

 

inherit

부모요소로부터 상속