-
24. JQuery 요소 크기 확인하기JQuery 2022. 9. 6. 10:32
html 에는 요소가 차지하는 고유한 영역(크기)가 있다.
width() / innerWidth() / outerWidth() / outerWidth(true) 를 사용하여 확인할 수 있다.
$(...).width() 순수 요소만의 크기 $(...).innerWidth() 순수 요소 + padding $(...).outerWidth() 순수 요소 + padding + border $(...).outerWidth(true) 순수 요소 + padding + border + margin * 요소의 크기를 확인하는 예시
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>문서 제목</title> <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script> <style> img{ width: 400px; height: 300px; padding: 10px; border: 3px solid black; margin: 5px; } </style> </head> <body> <img src="./stamp.png"> <p id="msg"></p> <p id="wsize"></p> <button id="width">width()</button> <button id="innerWidth">innerWidth()</button> <button id="outerWidth">outerWidth()</button> <button id="outerWidth2">outerWidth(true)</button> </body> <script> window.onresize = function(e){ console.log("window : ", $(window).width()); console.log("doc : " , $(document.width())); } /* width() : 순수요소 크기 innerWidth() : 순수요소 + padding outerWidth() : 순수요소 + padding + border outerWidth(true) : 순수요소 + padding + border + margin */ $("#width").click(function(){ $("#msg").html($("img").width()); //400 }); $("#innerWidth").click(function(){ $("#msg").html($("img").innerWidth()); //420 }); $("#outerWidth").click(function(){ $("#msg").html($("img").outerWidth()); //426 }); $("#outerWidth2").click(function(){ $("#msg").html($("img").outerWidth(true)); //436 }); </script> </html>'JQuery' 카테고리의 다른 글
23. JQuery 요소 삭제하기 (0) 2022.09.06 22. JQuery append를 사용하여 테이블에 값 추가하기 예시 - 1 (0) 2022.09.06 21. JQuery 요소 추가하기 (0) 2022.09.06 20. JQuery animate를 이용하여 요소에 이벤트 주기 예시 - 1 (0) 2022.09.06 19. JQuery 이벤트 객체를 이용하여 animate 응용 (0) 2022.09.02