Notice
Recent Posts
Recent Comments
Link
SeouliteLab
jQuery의 .width() 메서드: 요소의 너비 가져오기 본문
jQuery의 .width() 메서드는 선택한 요소의 너비를 가져옵니다. 이는 요소의 내부 콘텐츠의 너비를 기준으로 하며, 패딩(padding)과 테두리(border)는 포함하지 않습니다.
예제 1: 너비 가져오기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .width() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 너비 가져오기 예제
var width = $('.box').width();
console.log('너비:', width); // 출력 결과: 너비: 100
});
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
예제 2: 너비 설정하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .width() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 너비 설정하기 예제
$('.box').width(150);
var newWidth = $('.box').width();
console.log('변경된 너비:', newWidth); // 출력 결과: 변경된 너비: 150
});
</script>
<style>
.box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
예제 3: 다른 요소의 너비와 동기화하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .width() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
// 다른 요소의 너비와 동기화하기 예제
var otherWidth = $('.other-box').width();
$('.box').width(otherWidth);
});
</script>
<style>
.box, .other-box {
width: 100px;
height: 100px;
background-color: #f0f0f0;
}
.other-box {
width: 150px;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="other-box"></div>
</body>
</html>
'프로그래밍' 카테고리의 다른 글
jQuery의 .attr() 메서드: 속성 조작하기 (0) | 2024.03.27 |
---|---|
jQuery의 .addClass() 메서드: 요소에 클래스 추가하기 (0) | 2024.03.27 |
jQuery의 .innerHeight() 메서드: 요소의 내부 높이를 가져오기 (0) | 2024.03.27 |
jQuery의 .height() 메서드: 요소의 높이를 가져오고 설정하기 (0) | 2024.03.27 |
jQuery의 click 이벤트 핸들러 활용하기 (0) | 2024.03.27 |