디자인 요소의 크기 변경


안녕하세요.
고코더 입니다.


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 사랑함






댓글을 달아 주세요