코드랩 레퍼런스
.width() 본문
.width() 메서드는 선택한 요소의 가로를 설정하거나 반환합니다.
Definition
- .width() 메서드는 선택한 요소의 width 값을 가져옵니다.
- .width() 메서드는 선택한 요소의 width 값을 변경합니다.
- .width() 메서드는 선택한 요소의 width 값과 함수를 설정합니다..
Syntax
$(selector).width();
$(selector).width(속성값);
$(selector).width(함수);
$(selector).width(속성값);
$(selector).width(함수);
Compatibility
 |
 |
 |
 |
 |
 |
 6 |
 7 |
8 |
 9 |
 10 |
 11 |
 |
|
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| .attr() |
Sample 선택한 요소의 속성 값을 가져옵니다.
box의 크기는?
박스의 width = 0px
박스의 height = 0px
박스의 innerWidth = 0px
박스의 innerHeight = 0px
박스의 outerWidth = 0px
박스의 outerHeight = 0px
이 문서의 크기는 = 0px
이 브라우저의 크기는 = 0px
박스의 width = 0px
박스의 height = 0px
박스의 innerWidth = 0px
박스의 innerHeight = 0px
박스의 outerWidth = 0px
박스의 outerHeight = 0px
이 문서의 크기는 = 0px
이 브라우저의 크기는 = 0px
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery) : attr()</title>
<style>
#box {
border: 5px solid #ccc; padding:50px; margin:50px;
}
</style>
</head>
<body>
<div id="box">
box의 크기는?<br>
<span>박스의 width = </span><span id="width">0</span>px<br>
<span>박스의 height = </span><span id="height">0</span>px<br>
<span>박스의 innerWidth = </span><span id="innerWidth">0</span>px<br>
<span>박스의 innerHeight = </span><span id="innerHeight">0</span>px<br>
<span>박스의 outerWidth = </span><span id="outerWidth">0</span>px<br>
<span>박스의 outerHeight = </span><span id="outerHeight">0</span>px<br>
<span>이 문서의 크기는 = </span><span id="document">0</span>px<br>
<span>이 브라우저의 크기는 = </span><span id="window">0</span>px
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(window).resize(function(){
$('#width').text($('#box').width());
$('#height').text($('#box').height());
$('#innerWidth').text($('#box').innerWidth());
$('#innerHeight').text($('#box').innerHeight());
$('#outerWidth').text($('#box').outerWidth());
$('#outerHeight').text($('#box').outerHeight());
$('#document').text($(document).width());
$('#window').text($(window).width());
});
$(window).trigger('resize');
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제이쿼리(jQuery) : attr()</title>
<style>
#box2 {
border: 5px solid #ccc; padding:50px; margin:50px;
}
</style>
</head>
<body>
<div id="box2">
box를 클릭하면 width값이 줄어듭니다.<br>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
var mWidth = $("#box").width();
$("#box2").click(function() {
$(this).width(mWidth);
mWidth -= 100;
});
</script>
</body>
</html>
Ad
Comments