JQuery day11

박스모델 메소드

박스모델 메소드

박스모델의 가로, 세로 크기를 받아오거나 설정해주는 메소드를 알아보자.

종류	설명
width()	가로 크기를 가져오거나 설정하는 메소드
height()	세로 크기를 가져오거나 설정하는 메소드
innerWidth()	요소의 (가로크기 + 패딩의 가로 크기)를 가져오거나 설정하는 메소드
innerHeight()	요소의 (세로크기 + 패딩의 가로 크기)를 가져오거나 설정하는 메소드
outerWidth()	요소의 (가로크기 + 패딩 + 테두리의 가로 크기)를 가져오거나 설정하는 메소드
outerHeight()	요소의 (세로크기 + 패딩 + 테두리의 가로 크기)를 가져오거나 설정하는 메소드
outerWidth(true)	요소의 (가로크기 + 패딩 + 테두리 + 마진의 가로 크기)를 가져오거나 설정하는 메소드
outerHeight(true)	요소의 (세로크기 + 패딩 + 테두리 + 마진의 가로 크기)를 가져오거나 설정하는 메소드

1. width(), height()로 크기 받아오기

<div id="divBox">
    <p id="text"></p>
</div>

<style>
#divBox{
    width: 400px;
    height: 100px;
    border: 5px solid black;
    text-align: center;
    margin-bottom: 10px;
}
#text{
    font-weight: bolder;
}
</style>

$(function(){
    const str = 
          `div 요소 가로 크기 : ${$('#divBox').width()},
			div 요소 세로 크기 : ${$('#divBox').height()}`;

    $('#text').html(str);
});

2. width(), height()로 크기 설정하기

<div id="divBox">
    <p id="text"></p>
</div>

<style>
#divBox{
    border: 5px solid black;
    text-align: center;
    margin-bottom: 10px;
}
#text{
    font-weight: bolder;
}
</style>

$(function(){
    $('#divBox').width('400px') // 가로크기 설정
    $('#divBox').height('200px') // 세로크기 설정

    const str = 
          `div 요소 가로 크기 : ${$('#divBox').width()},
			div 요소 세로 크기 : ${$('#divBox').height()}`;

    $('#text').html(str);
});