티스토리 뷰

jQuery

[jQuery] .width()

.width()

선택한 요소에 가로 값을 설정합니다.


.width()

.width() 메서드는 선택한 요소의 높이(패딩/마진/보더 불포함)를 설정합니다.

문법(Syntax)

$("선택자").width();
$("선택자").width("속성");
$("선택자").width(함수);

정의(Definition)

  • 박스 요소의 높이 값은 패딩, 마진, 보더 값을 포함한 값이기 때문에 .width()는 패딩, 마진, 보더 값을 포함하지 않는 값을 가져옵니다.
  • .width() 메서드와 .css() 메서드는 높이 값을 똑같이 가져옵니다. 하지만 .css() 메서드는 단위까지 출력이 된다는 차이점이 있습니다. 수학적인 계산이 필요한 부분에서는 .width() 메서드를 추천하며, 샘플 1번을 참고하면 됩니다.
  • .width() 메서드는 선택한 요소의 높이 값을 가져옵니다.
  • .width("속성") 메서드는 선택한 요소의 높이 값을 변경합니다.
  • .width(함수) 메서드는 선택한 요소의 함수를 이용하여 높이 값을 설정합니다.

샘플(Sample)

.width() : 원하는 요소의 가로 값을 출력하는 예제입니다. .width()와 .css()메서드는 단위 출력 유무에 따라 차이점이 있습니다.

Sample1

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.

jquery
function showWidth(element, width){
    $(".list1 p").text( element + "의 가로 값은 " + width + "px.");
}
$( ".choice1 .btn1" ).click(function(){
    showWidth("리스트(.height())", $(".list1").width());
});
$( ".choice1 .btn2" ).click(function(){
    showWidth("리스트(.css())", $(".list1").css("width"));
});
$( ".choice1 .btn3" ).click(function(){
    showWidth("문서", $(document).width());
});
$( ".choice1 .btn4" ).click(function(){
    showWidth("브라우저", $(window).width());
});
html
<h3>탐색(Traversing)</h3>
<div class="list1">
    <ul>
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
    <p></p>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select:before {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list1">
        <ul>
            <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
        <p></p>
    </div>
    
    <div class="choice1">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 리스트의 가로 값(.width())을 구합니다.</a>
        <a href="#" class="btn2">클릭하면 브라우저의 가로 값(.css("width"))을 구합니다.</a>
        <a href="#" class="btn3">클릭하면 이 문서의 가로 값을 구합니다.</a>
        <a href="#" class="btn4">클릭하면 브라우저의 가로 값을 구합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .off1").on("click", function(e){
            e.preventDefault();
            $(".list1 p").text("");
        });
        
        function showWidth(element, width){
            $(".list1 p").text( element + "의 높이 값은 " + width + "px.");
        }
        $( ".choice1 .btn1" ).click(function(){
            showWidth("리스트(.height())", $(".list1").width());
        });
        $( ".choice1 .btn2" ).click(function(){
            showWidth("리스트(.css())", $(".list1").css("width"));
        });
        $( ".choice1 .btn3" ).click(function(){
            showWidth("문서", $(document).width());
        });
        $( ".choice1 .btn4" ).click(function(){
            showWidth("브라우저", $(window).width());
        });
    </script>

</body>
</html>

샘플(Sample)

.width(value) : 원하는 요소의 가로 값을 변경하는 예제입니다.

Sample2

탐색(Traversing)

  • .eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.
  • .filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.
  • .first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.
  • .has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.
  • .is() 메서드는 선택된 요소 객체의 특징을 판별합니다.
  • .last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.

jquery
$(".list2 p").text("현재 리스트의 가로 값은 " + $(".list2").width() + "px 입니다.");
$(".choice2 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list2 ul").width("280");
});
$(".choice2 .btn2").on("click", function(e){
    e.preventDefault();
    $(".list2 ul").width("450");
});
html
<h3>탐색(Traversing)</h3>
<div class="list2">
    <ul class="rLine">
        <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
        <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
        <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
        <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
        <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
        <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
    </ul>
    <p></p>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select:before {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>탐색(Traversing)</h3>
    <div class="list2">
        <ul class="rLine">
            <li>.eq() 메서드는 선택한 요소에 인덱스 번호에 해당하는 요소를 찾습니다.</li>
            <li>.filter() 메서드는 선택된 요소에서 선택하거나 함수를 사용할 수 있습니다.</li>
            <li>.first() 메서드는 선택된 요소에서 첫번째 자식 요소를 찾습니다.</li>
            <li>.has() 메서드는 선택된 요소의 자식 요소에서 주어진 선택자를 찾습니다.</li>
            <li>.is() 메서드는 선택된 요소 객체의 특징을 판별합니다.</li>
            <li>.last() 메서드는 선택된 요소에서 마지막 번째 자식 요소를 찾습니다.</li>
        </ul>
        <p></p>
    </div>
    
    <div class="choice2">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 리스트의 가로 값을 280px로 변경합니다.</a>
        <a href="#" class="btn2">클릭하면 리스트의 가로 값을 450px로 변경합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice2 .off1").on("click", function(e){
            e.preventDefault();
            $(".list2 ul").width("");
        });
        
        $(".list2 p").text("현재 리스트의 높이 값은 " + $(".list2").width() + "px 입니다.");
        
        $(".choice2 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list2 ul").width("280");
        });
        $(".choice2 .btn2").on("click", function(e){
            e.preventDefault();
            $(".list2 ul").width("450");
        });
    </script>

</body>
</html>

샘플(Sample)

.width(function) : 원하는 요소의 가로 값을 함수를 이용하여 순차적으로 적용한 예제입니다.

jquery
$(".choice3 .btn1").on("click", function(e){
    e.preventDefault();
    $(".list3 img").height(function(index){
        return (index + 1) * 30;
    });
    $(".list3 img").width(function(index){
        return (index + 1) * 30;
    });
});
html
<h3>Dimensions</h3>
<div class="list3 img">
    <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch01.jpg" alt="">
    <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch02.jpg" alt="">
    <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch03.jpg" alt="">
    <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch04.jpg" alt="">
    <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch05.jpg" alt="">
    <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch06.jpg" alt="">
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select:before {padding: 4px 6px 2px 6px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .rLine {padding: 4px 4px 2px 10px; font-size: 90%; color: #c7254e; white-space: nowrap; background-color: #f9f2f4; border-radius: 4px; border: 1px dashed #a51a3d;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
        .list3.img {padding: 10px 0;}
        .list3.img img {width: 100px;}
    </style>
</head>
<body>
    
    <h3>Dimensions</h3>
    <div class="list3 img">
        <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch01.jpg" alt="">
        <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch02.jpg" alt="">
        <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch03.jpg" alt="">
        <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch04.jpg" alt="">
        <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch05.jpg" alt="">
        <img src="https://tistory3.daumcdn.net/tistory/2933724/skin/images/watch06.jpg" alt="">
    </div>
    
    <div class="choice3">
        <a href="#" class="off1">리셋</a>
        <a href="#" class="btn1">클릭하면 사진의 크기를 순차적으로 합니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice3 .off1").on("click", function(e){
            e.preventDefault();
            $(".list3 img").height("").width("");
        });
        
        $(".choice3 .btn1").on("click", function(e){
            e.preventDefault();
            $(".list3 img").height(function(index){
                return (index + 1) * 30;
            });
            $(".list3 img").width(function(index){
                return (index + 1) * 30;
            });
        });
    </script>

</body>
</html>

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

태그(Tag) 더보기

질문하기(Questions)
댓글쓰기 폼