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

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?

document.getElementById("mydiv").offsetWidth

• Element.offsetWidth (MDC)

Bạn có thể sử dụng clientWidthhoặc offsetWidth tham chiếu mạng của nhà phát triển Mozilla

Nó sẽ giống như:

document.getElementById("yourDiv").clientWidth; // returns number, like 728

hoặc với chiều rộng đường viền:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

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.

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.

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

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);  
}

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();
        }


    }

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.