Jak znaleźć szerokość elementu div przy użyciu surowego kodu JavaScript?

Question

Jak znaleźć bieżącą szerokość <div> w sposób zgodny z różnymi przeglądarkami bez przy użyciu biblioteki takiej jak jQuery?

Answer 1

document.getElementById("mydiv").offsetWidth 

• element.offsetWidth (MDC)

Answer 2

Można również wyszukiwać za pomocą DOM className. Na przykład:

document.getElementsByClassName("myDiv") 

Spowoduje to wyświetlenie tablicy. Jeśli jest jedna szczególna właściwość jesteś zainteresowany. Na przykład:

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

divWidth teraz będzie równa szerokości pierwszego elementu div w swojej tablicy.

Answer 3

Można użyć clientWidth lub offsetWidthMozilla developer network reference

To byłoby jak:

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

lub szerokości Granice:

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

Answer 4

rozmowy poniżej metody na znacznika div lub ciała onclick =” pokaż (wydarzenie); " Funkcja pokazu (event) {

 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

Wszystkie odpowiedzi są w porządku, ale nadal chce dać jakieś inne alternatywy, które mogą pracować.

Jeśli szukasz przypisanej szerokości (ignorowanie dopełnienia, marginesu itd.), Możesz użyć.

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

getComputedStyle umożliwia dostęp do wszystkich stylów tych elementów. Na przykład: padding, paddingLeft, margin, border-top-left-round i tak dalej.

Answer 6

W rzeczywistości nie trzeba używać document.getElementById("mydiv").
można po prostu użyć identyfikator div, jak:

var w = mydiv.clientWidth;
lub
var w = mydiv.offsetWidth;
itp