-
박스모델 메소드프로그래밍/JQuery 2022. 11. 1. 20:55728x90
박스모델의 가로, 세로 크기를 받아오거나 설정해주는 메소드를 알아보자.
종류 설명 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'프로그래밍 > JQuery' 카테고리의 다른 글
이벤트(event) 종류 (0) 2022.11.04 클래스 다루기 (0) 2022.11.02 자식, 자손 요소의 탐색 (0) 2022.10.31 형제요소 탐색 (0) 2022.10.30 조상요소 탐색 (0) 2022.10.28