Comment trouver la largeur d'une div en utilisant du JavaScript vanille?

Comment trouvez-vous la largeur actuelle d'un <div>dans une manière compatible avec plusieurs navigateurs sans utiliser une bibliothèque comme jQuery?

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

Vous pouvez utiliser clientWidthou offsetWidth référence de réseau de développeur Mozilla

Ce serait comme:

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

ou avec une largeur de bordure:

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

Toutes les réponses sont bonnes, mais je veux quand même donner quelques autres alternatives qui pourraient fonctionner.

Si vous recherchez la largeur attribuée (en ignorant le rembourrage, 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 et ainsi de suite.

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

document.getElementsByClassName("myDiv")

Cela renverra un tableau. S'il y a une propriété particulière 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.

En fait, vous n'avez pas à utiliser document.getElementById("mydiv") .
Vous pouvez simplement utiliser l'id du div, comme:

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

Une autre option consiste à utiliser la fonction getBoundingClientRect. Veuillez noter que getBoundingClientRect retournera un rect vide si l'affichage de l'élément est «aucun».

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

appeler la méthode ci-dessous sur la balise div ou body onclick = "show (event);" fonction show (événement) {

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


    }

La manière correcte d'obtenir le style calculé attend le rendu de la page. Cela peut être fait de la manière suivante. Faites attention au délai d'attente pour obtenir des autovaleurs.

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 seulement

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

vous pouvez obtenir des autovaleurs de largeur et de hauteur car les navigateurs ne s'affichent pas tant que la charge complète n'est pas effectuée.