width()
width() 메서드는 선택한 요소의 가로 값을 가져오거나 설정합니다.
width()
width() 메서드는 선택한 요소의 가로 값을 가져오거나 설정합니다.
특징 | 설명 |
---|---|
버전(version) | 1.x |
결과값(return) | 숫자(number) |
사용성 | ★★★★★ |
문법(Syntax)
"선택자".width()
"선택자".width(속성값)
"선택자".width(함수)
//가로 값을 가져오는 경우
$("div").width();
//가로 속성 값을 변경하는 경우
$("div").width("100");
//콜백 함수를 사용하는 경우
$("div").width(function(){});
- 선택자(selector) : 가로 값을 구할 요소 선택자를 설정합니다.
- 속성값(value) : 변경할 속성 값을 설정합니다.
- 함수(function) : 가로 값을 구한 후 실행되는 함수를 설정합니다.
정의(Definition)
- width() 메서드는 선택한 요소의 가로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
- width() 메서드와 css() 메서드는 높이 값을 똑같이 가져올 수 있습니다. 하지만 css() 메서드는 단위까지 출력이 된다는 차이점이 있습니다.
크기와 관련된 메서드(Dimensions Related method)
- width() 메서드는 선택한 요소의 가로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
- innerWidth() 메서드는 선택한 요소의 가로 값(패딩 포함)을 가져오거나 설정합니다.
- outerWidth() 메서드는 선택한 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정합니다.
- outerWidth(true) 메서드는 선택한 요소의 가로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.
- height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
- innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다.
- outerHeight() 메서드는 선택한 요소의 세로 값(패딩/보더 포함)을 가져오거나 설정합니다.
- outerHeight(true) 메서드는 선택한 요소의 세로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.
비교(Compare) : Javascript
- clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다.
- clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다.
- clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
- clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
- offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
- offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.
- offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
- offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다.
- offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다.
- getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
- getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
예제1(Sample)
버튼을 클릭하면 박스의 가로 값을 구하는 예제입니다.
width: 400px
margin: 20px
border: 1px
padding: 20px
margin: 20px
border: 1px
padding: 20px
여기에 결과값이 표시됩니다.
버튼을 클릭하면 width()을 구합니다.
버튼을 클릭하면 innerWidth()을 구합니다.
버튼을 클릭하면 outerWidth()을 구합니다.
버튼을 클릭하면 outerWidth(true)을 구합니다.
HTML
CSS
SCRIPT
<div class="jsample">
<div class="box">
<span>
width: 400px<br>
margin: 20px<br>
border: 1px<br>
padding: 20px<br>
</span>
</div>
<p class="desc">여기에 결과값이 표시됩니다.</p>
</div>
.jsample {
text-align: center;
}
.jsample .box {
margin: 20px auto;
width: 400px;
height: 200px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
padding: 20px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.jsample .box::before {
content: '';
width: 358px;
height: 158px;
border: 1px dashed #4390E1;
position: absolute;
left: 20px; top: 20px;
}
.jsample .box::after {
content: '';
width: 440px;
height: 240px;
border: 1px dashed #4390E1;
position: absolute;
left: -21px; top: -21px;
}
.jsample .box span {
color: #fff;
}
.jsample .desc {
padding-top: 10px;
}
$(".sampleBtn .btn1").click(function(){
$(".jsample .desc").text("이 박스의 가로 값은 "+$(".jsample .box").width()+"px 입니다.(패딩, 마진, 보더 불포함)");
});
$(".sampleBtn .btn2").click(function(){
$(".jsample .desc").text("이 박스의 가로 값은 "+$(".jsample .box").innerWidth()+"px 입니다.(패딩 포함 / 마진, 보더 불포함)");
});
$(".sampleBtn .btn3").click(function(){
$(".jsample .desc").text("이 박스의 가로 값은 "+$(".jsample .box").outerWidth()+"px 입니다.(패딩, 보더 포함 / 마진 불포함)");
});
$(".sampleBtn .btn4").click(function(){
$(".jsample .desc").text("이 박스의 가로 값은 "+$(".jsample .box").outerWidth(true)+"px 입니다.(패딩, 보더, 마진 포함)");
});
예제2(Sample)
버튼을 클릭하면 박스의 가로 값을 변경하는 예제입니다.
width: 400px
HTML
CSS
SCRIPT
<div class="jsample">
<div class="box2">
<span>width: 400px<br></span>
</div>
</div>
.jsample .box2 {
margin: 20px auto;
width: 400px;
height: 200px;
background-color: #A2CBFA;
border: 1px solid #4390E1;
padding: 20px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.jsample .box2 span {
color: #fff;
}
$(".sampleBtn .btn0").click(function(){
$(".jsample .box2").width("400");
$(".jsample .box2 span").text("width: 400px");
});
$(".sampleBtn .btn1").click(function(){
$(".jsample .box2").width(100);
$(".jsample .box2 span").text("width: 100px");
});
$(".sampleBtn .btn2").click(function(){
$(".jsample .box2").width(600);
$(".jsample .box2 span").text("width: 600px");
});
$(".sampleBtn .btn3").click(function(){
$(".jsample .box2").width("20%");
$(".jsample .box2 span").text("width: 20%");
});
호환성(Compatibility)
6 | 7 | 8 | 9 | 10 | 11 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
width() | jQeury 1.x 버전 | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
jQeury 2.x 버전 | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ | |
jQeury 3.x 버전 | ○ | ○ | ○ | ○ | ○ | ❌ | ❌ | ❌ | ○ | ○ | ○ | ○ | ○ | ○ |