반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.6.4.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width : 300px;
height : 200px;
border : 3px solid red;
padding : 10px;
margin : 10px;
}
</style>
</head>
<body>
<div class="box">
<div id="text1"></div>
</div>
<button id = "btn">크기 구하기</button>
</body>
</html>
<script>
$(function() {
$("#btn").on("click", function() {
var str = "width : " + $(".box").width() + "px <br>";
str += "height : " + $(".box").height() + "px <br>"
str += "innerHeight : " + $(".box").innerHeight() + "px <br>"
str += "innerWidth : " + $(".box").innerWidth() + "px <br>"
str += "outerHeight : " + $(".box").outerHeight() + "px <br>"
str += "outerWidth : " + $(".box").outerWidth() + "px <br>"
str += "outerHeight(true) : " + $(".box").outerHeight(true) + "px <br>"
str += "outerWidth(true) : " + $(".box").outerWidth(true) + "px <br>"
$("#text1").html(str);
});
});
</script>반응형
'Java Script > JQuery' 카테고리의 다른 글
| [JQuery] image-effect 이미지 효과 #0418수업 #6교시 (0) | 2023.04.18 |
|---|---|
| [JQuery] 함수 #0418수업 #5교시 (0) | 2023.04.18 |
| [JQuery] each, toggleClass #0418수업 #4교시 (0) | 2023.04.18 |
| [JQuery] 부모자식 요소 #0418수업 #4교시 (0) | 2023.04.18 |
| [JQuery] 복사, 대체 #0418수업 #3교시 (0) | 2023.04.18 |