web-dev-qa-db-fra.com

Comment trouver la largeur d'une div à l'aide de JavaScript brut?

Comment trouver la largeur actuelle d'un <div> d'une manière compatible avec plusieurs navigateurs sans en utilisant une bibliothèque comme jQuery?

javascripthtml
221
Joda Maki
document.getElementById("mydiv").offsetWidth
332
Andy E

Vous pouvez utiliser clientWidth ou offsetWidthRéférence du réseau de développement Mozilla

Ce serait comme:

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

ou avec des bordures de largeur:

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

Toutes les réponses sont correctes, mais je souhaite tout de même proposer d'autres solutions qui pourraient fonctionner.

Si vous recherchez la largeur assignée (en ignorant le remplissage, la marge, etc.), vous pouvez utiliser.

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

getComputedStyle vous permet d'accéder à tous les styles de ces éléments. Par exemple: padding, paddingLeft, margin, border-top-left-radius, etc.

7
Alex Flexlex Waldboth

Vous pouvez également rechercher le DOM à l'aide de ClassName. Par exemple: 

document.getElementsByClassName("myDiv")

Cela retournera un tableau. S'il y a une propriété en particulier qui vous intéresse, par exemple: 

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

divWidth sera désormais égal à la largeur du premier élément de votre tableau div.

3
user3386050

En fait, vous n'avez pas besoin d'utiliser document.getElementById("mydiv").
Vous pouvez simplement utiliser l'identifiant de la div, comme:

var w = mydiv.clientWidth;
ou
var w = mydiv.offsetWidth;
etc.

1
Ari

Une autre option consiste à utiliser la fonction getBoundingClientRect. Notez que getBoundingClientRect retournera un rectangle vide si l'affichage de l'élément est 'none'.

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

méthode call below sur la balise div ou body onclick = "show (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();
        }


    }
0
Amrik

La manière correcte d’obtenir un style calculé est d’attendre que la page soit rendue. Cela peut être fait de la manière suivante. Faites attention à l'expiration du délai d'attente pour obtenir les valeurs auto.

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

Si vous utilisez juste 

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

vous pouvez obtenir des valeurs auto pour la largeur et la hauteur, car les navigateurs ne s'affichent pas tant que le chargement n'est pas complet.

0
Siarhei Kuchuk