Làm cách nào để tìm chiều rộng của div bằng cách sử dụng JavaScript vanilla?


267

Làm thế nào để bạn tìm thấy chiều rộng hiện tại của một <div>cách tương thích với nhiều trình duyệt mà không cần sử dụng thư viện như jQuery?


104
+1 cho nhận xét "không có jQuery" :)
Zlatko

1
Bản sao có thể có của Hiểu offsetWidth, clientWidth, scrollWidth và -Height, tương ứng (điều này, thực sự, đã được hỏi nhiều sau đó, nhưng vẫn có câu trả lời phức tạp hơn nhiều ).

Câu trả lời:


400
document.getElementById("mydiv").offsetWidth

8
Điều đó, hoặc cientWidth, dù tôi không biết sự khác biệt thực sự.
JCOC611

123
offsetWidthBao gồm chiều rộng biên giới, clientWidthkhông.
lincolnk

1
Khi myDiv không có quy tắc CSS nhưng có "width" và "height" được xác định trong thẻ, offsetWidth trả về chiều rộng cha. Không phải là vấn đề tôi chỉ cần thêm quy tắc CSS và nó hoạt động tốt.
cướp

offsetHeight luôn zero trong IE11
nim

4
@nim nếu div của bạn có display: nonehoặc không phải là một phần của tài liệu, nó sẽ luôn có chiều cao bù bằng không.
Andy E


9

Tất cả các câu trả lời đều đúng, nhưng tôi vẫn muốn đưa ra một số lựa chọn thay thế khác có thể hoạt động.

Nếu bạn đang tìm kiếm chiều rộng được chỉ định (bỏ qua phần đệm, lề và vv), bạn có thể sử dụng.

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputingStyle cho phép bạn truy cập tất cả các kiểu của các thành phần đó. Ví dụ: padding, paddingLeft, lề, Border-top-left-radius, v.v.


4

Bạn cũng có thể tìm kiếm DOM bằng ClassName. Ví dụ:

document.getElementsByClassName("myDiv")

Điều này sẽ trả về một mảng. Nếu có một tài sản cụ thể mà bạn quan tâm. Ví dụ:

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth bây giờ sẽ bằng chiều rộng của phần tử đầu tiên trong mảng div của bạn.


2

Trên thực tế, bạn không phải sử dụng document.getElementById("mydiv") .
Bạn chỉ có thể sử dụng id của div, như:

var w = mydiv.clientWidth;
hoặc
var w = mydiv.offsetWidth;
vv


1

Một tùy chọn khác là sử dụng hàm getBoundingClientRect. Xin lưu ý rằng getBoundingClientRect sẽ trả về một chỉnh lưu trống nếu màn hình của phần tử là 'none'.

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

0

gọi phương thức bên dưới trên thẻ div hoặc thẻ cơ thể onclick = "show (event);" chức năng hiển thị (sự kiện) {

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert('right click');
            gallery.next();
        }
        else
       {
           //   alert('left click');
            gallery.prev();
        }


    }

0

Cách chính xác để có được kiểu tính toán đang chờ cho đến khi trang được hiển thị. Nó có thể được thực hiện theo cách sau. Hãy chú ý đến thời gian chờ nhận autogiá trị.

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById('__root__'));
        if (style.height == 'auto') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

Nếu bạn sử dụng chỉ

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

bạn có thể nhận autocác giá trị cho chiều rộng và chiều cao vì trình duyệt không hiển thị cho đến khi tải đầy đủ được thực hiện.

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.