디자인 요소의 크기 변경
안녕하세요.
고코더 입니다.
jQuery에서는 선택한 요소의 크기의 값을 알거나
변화 시킬 수 있습니다.
● 1. 바로 width()와 height() 메서드 입니다.
width() - 선택요소의 가로 크기를 가져오거나 변경한다.
height() - 선택요소의 세로 크기를 가져오거나 변경한다.
style 속성에 접근하지 않아도
간단한 명령어로 크기를 조절 가능 합니다.
● 2. 예제를 한번 살펴보세요.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready( function() { //해당 DIV 사이즈 조정 $('#gocoder_size').width('300'); $('#gocoder_size').height('300'); alert($('#gocoder_size').width()); alert($('#gocoder_size').height()); }); </script> </head> <body> <div id="gocoder_size" style="height:50px; width:50px;background-color: #000000"> </div> </body> </html> | cs |
gocoder_size.html● 3. 가로 세로 50px 크기를
300PX로 바꾸고 해당 크기를 경고창으로 보여줍니다.
아래 코드는 사이즈를 변경 시켰고
$('#gocoder_size').width('300');
아래 코드는 사이즈 정보를 가져왔습니다.
$('#gocoder_size').width();
● 4. 실무에서 자주 사용하는 기능입니다.
저는 제 홈페이지 전자책 뷰어를 만들면서
전자책 디바이스의 해상도에 따라
뷰어 크기를 조정할 수 있게 하기 위해 사용하였습니다.
마무리
jQuery 사랑함
'IT_Developers > Javascript' 카테고리의 다른 글
| 자바스크립트 - location.href 와 location.replace 차이점 (0) | 2019.07.15 |
|---|---|
| console.log - 콘솔 로그 스타일 입히기 (0) | 2019.07.11 |
| JavaScript - setTimeout(), setInterval() 차이점 예제 (1) | 2019.06.17 |
| jQuery UI - 이미지 드래그, 리사이징 / resizable() draggable() (0) | 2019.06.11 |
| jQuery UI - Div 강조하기 / effect highlight (0) | 2019.06.03 |
댓글