프로그래밍/JQuery
박스모델 메소드
하와이블루
2022. 11. 1. 20:55
728x90
박스모델의 가로, 세로 크기를 받아오거나 설정해주는 메소드를 알아보자.
| 종류 | 설명 |
| width() | 가로 크기를 가져오거나 설정하는 메소드 |
| height() | 세로 크기를 가져오거나 설정하는 메소드 |
| innerWidth() | 요소의 (가로크기 + 패딩의 가로 크기)를 가져오거나 설정하는 메소드 |
| innerHeight() | 요소의 (세로크기 + 패딩의 가로 크기)를 가져오거나 설정하는 메소드 |
| outerWidth() | 요소의 (가로크기 + 패딩 + 테두리의 가로 크기)를 가져오거나 설정하는 메소드 |
| outerHeight() | 요소의 (세로크기 + 패딩 + 테두리의 가로 크기)를 가져오거나 설정하는 메소드 |
| outerWidth(true) | 요소의 (가로크기 + 패딩 + 테두리 + 마진의 가로 크기)를 가져오거나 설정하는 메소드 |
| outerHeight(true) | 요소의 (세로크기 + 패딩 + 테두리 + 마진의 가로 크기)를 가져오거나 설정하는 메소드 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스모델관련 메소드</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" />
<style>
#divBox{
width: 400px;
height: 100px;
border: 5px solid black;
text-align: center;
margin-bottom: 10px;
}
#text{
font-weight: bolder;
}
</style>
<script>
$(function(){
const str = `div 요소 가로 크기 : ${$('#divBox').width()},
div 요소 세로 크기 : ${$('#divBox').height()}`;
$('#text').html(str);
});
</script>
</head>
<body>
<div id="divBox">
<p id="text"></p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스모델관련 메소드</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous" />
<style>
#divBox{
border: 5px solid black;
text-align: center;
margin-bottom: 10px;
}
#text{
font-weight: bolder;
}
</style>
<script>
$(function(){
$('#divBox').width('400px') // 가로크기 설정
$('#divBox').height('200px') // 세로크기 설정
const str = `div 요소 가로 크기 : ${$('#divBox').width()},
div 요소 세로 크기 : ${$('#divBox').height()}`;
$('#text').html(str);
});
</script>
</head>
<body>
<div id="divBox">
<p id="text"></p>
</div>
</body>
</html>
728x90