Sự khác biệt giữa chiều rộng, bên trong và bên ngoài, chiều cao, bên trong và bên ngoài trong jQuery là gì


123

Tôi đã viết một số ví dụ để xem sự khác biệt là gì, nhưng chúng hiển thị cho tôi cùng kết quả về chiều rộng và chiều cao.

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

Trong ví dụ này, bạn có thể thấy rằng họ đưa ra kết quả tương tự. Nếu ai biết sự khác biệt là gì xin vui lòng chỉ cho tôi câu trả lời thích hợp.

Cảm ơn.


8
Bạn đã xem tài liệu jQuery chưa?
Brad M

1
Hãy thử thêm phần đệm, đường viền và lề cho bạn <div>và xem liệu điều đó có cho kết quả khác không;)
Niet the Dark Tuyệt đối

4
api.jquery.com/carget/dimensions Trang đó mô tả tất cả và nếu bạn nhấp vào, mỗi thông tin sẽ cung cấp thêm thông tin.
JClaspill

Tôi đã tìm kiếm trong google, nhưng không có câu trả lời nào thỏa mãn mong đợi của tôi.
zajke

@BradM - Không có đàn ông. Nhưng kết quả cho "sự khác biệt giữa chiều rộng, đường bên trong, đường viền bên ngoài" không có gì cho tôi biết về bản chất.
zajke

Câu trả lời:


281

Bạn đã thấy những ví dụ này? Trông tương tự như câu hỏi của bạn.

Làm việc với chiều rộng và chiều cao

nhập mô tả hình ảnh ở đây

jQuery - Kích thước

jQuery: chiều cao, chiều rộng, bên trong và bên ngoài


1
câu trả lời hay nhất từ ​​trước đến nay
Benjamin

Tôi vừa mới đăng câu trả lời bên dưới kể từ bây giờ Tôi đang thấy một hành vi khác nhau giữa hai tùy chọn không được mô tả theo mô tả của bạn
GWorking

16

Như đã đề cập trong một bình luận, tài liệu cho bạn biết chính xác sự khác biệt là gì. Nhưng tóm lại:

  • InternalWidth / InternalHeight - bao gồm phần đệm nhưng không viền
  • outsWidth / outsHeight - bao gồm phần đệm, đường viền và lề tùy chọn
  • chiều cao / chiều rộng - chiều cao phần tử (không đệm, không lề, không viền)

4
  • width = lấy chiều rộng,

  • InternalWidth = lấy chiều rộng + phần đệm,

  • outsWidth = get width + padding + Border và tùy chọn lề

Nếu bạn muốn kiểm tra thêm một số phần đệm, lề, viền vào các lớp .test của bạn và thử lại.

Cũng đọc trong các tài liệu jQuery ... Mọi thứ bạn cần đều có khá nhiều ở đó


2

Có vẻ như cần phải nói về việc gán giá trị và so sánh về ý nghĩa của tham số "width" trong jq: (giả sử rằng new_value được xác định theo đơn vị px)

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

Ba hướng dẫn không cho tác dụng tương tự: vì hướng dẫn jquery đầu tiên xác định innerwidth của phần tử và không phải là "width". Đây là khó khăn.

Để có được hiệu ứng tương tự, bạn phải tính toán các phần đệm trước (giả sử var là phần đệm), hướng dẫn đúng cho jquery để có được kết quả tương tự như js thuần (hoặc tham số css 'width') là:

jqElement.css('width',new_value+pads);

Chúng tôi cũng có thể lưu ý rằng:

var w1 = jqElement.css('width');
var w2 = jqelement.width();

w1 là độ rộng trong, trong khi w2 là độ rộng (nghĩa của thuộc tính css) Sự khác biệt không được ghi lại trong tài liệu API JQ.

Trân trọng

Trebly


Lưu ý: theo tôi, đây có thể được coi là một lỗi JQ 1.12.4, cách để đi ra ngoài là giới thiệu một cách dứt khoát một danh sách các tham số được chấp nhận cho .css ('tham số', giá trị) vì có nhiều ý nghĩa khác nhau đằng sau 'tham số' chấp nhận, có lãi nhưng phải luôn rõ ràng. Trong trường hợp này: 'băng thông bên trong' sẽ không có nghĩa giống như 'chiều rộng'. Chúng ta có thể tìm thấy dấu vết của vấn đề này trong tài liệu về băng thông (giá trị) với câu: "Lưu ý rằng trong các trình duyệt hiện đại, thuộc tính chiều rộng CSS không bao gồm phần đệm"


Đã thêm twist: .css('width')giống như .outerWidth()(nghĩa là nó bao gồm đường viền cũng như phần đệm) khi box-sizing: border-box;.
Bob Stein

0

Đồng ý với tất cả các câu trả lời ở trên. Chỉ cần thêm vào về mặt cửa sổ hoặc triển vọng trình duyệt innerWidth/ innerheightchỉ bao gồm khu vực nội dung cửa sổ, không có gì khác, nhưng

outerWidth/ outerHeight bao gồm khu vực nội dung của windows và ngoài ra, nó cũng bao gồm những thứ như thanh công cụ, thanh cuộn, v.v ... và các giá trị này sẽ luôn bằng hoặc lớn hơn các giá trị InternalWidth / InternalHeight.

Hy vọng nó sẽ giúp nhiều hơn ...


0

Những gì tôi đang thấy ngay bây giờ là innerWidthbao gồm toàn bộ nội dung

Đây là, nếu cửa sổ là 900pxvà nội dung là 1200px(và có một cuộn)

  • innerWidth đưa cho tôi 1200px
  • outerWidth đưa cho tôi 900px

Hoàn toàn bất ngờ trong mắt tôi

* Trong trường hợp của tôi, nội dung được chứa trong một <iframe>

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.