Cách tìm chiều rộng của div bằng JavaScript thô?

Question

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

Answer 1

document.getElementById("mydiv").offsetWidth 

• element.offsetWidth (MDC)

Answer 2

Bạn cũng có thể tìm kiếm trên DOM sử dụ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 biệt mà bạn đang quan tâm Ví dụ:.

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

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

Answer 3

Bạn có thể sử dụng clientWidth hoặc offsetWidthMozilla developer network reference

Nó sẽ như thế nào:

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

hoặc với biên giới width:

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

Answer 4

cuộc gọi dưới phương pháp trên thẻ div hoặc cơ onclick =" show (sự kiện); " chương trình chức năng (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(); 
     } 


    } 

Answer 5

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

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

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

getComputedStyle cho phép bạn truy cập tất cả các kiểu của các yếu tố đó. Ví dụ: padding, paddingLeft, margin, border-top-left-radius và vân vân.

Answer 6

Thực ra, 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