web-dev-qa-db-fra.com

Obtenir la largeur en pixels de l'élément avec le style défini avec%?

J'ai cet élément:

<div style="width: 100%; height: 10px;"></div>

Je veux obtenir sa largeur en pixels. Je viens d'essayer ceci:

document.getElementById('banner-contenedor').style.width

Qui retourne 100%. Est-il possible d'obtenir réellement la largeur de l'élément en pixels avec javascript?

javascripthtmlcss
59
lisovaccaro
document.getElementById('banner-contenedor').clientWidth
74
xdazz

Vous voulez obtenir la largeur calculée. Essayez: .offsetWidth

(C'est à dire: this.offsetWidth='50px' ou var w=this.offsetWidth)

Vous pourriez aussi aimer cette réponse sur SO.

12
GitaarLAB

Pas une seule réponse ne fait ce qui a été demandé dans Vanilla JS, et je veux une réponse à la vanille alors je l’ai faite moi-même.

clientWidth inclut le remplissage et offsetWidth tout le reste ( lien jsfiddle ). Ce que vous voulez, c'est obtenir le style calculé ( lien jsfiddle ).

function getInnerWidth(elem) {
    return parseFloat(window.getComputedStyle(elem).width);
}

EDIT: getComputedStyle n'est pas standard. Certains navigateurs renvoient une valeur qui prend en compte la barre de défilement si l'élément en contient une (qui à son tour donne une valeur différente de la largeur définie dans CSS). Si l'élément comporte une barre de défilement, vous devez calculer manuellement la largeur en supprimant les marges et les marges de offsetWidth.

function getInnerWidth(elem) {
    var style = window.getComputedStyle(elem);
    return elem.offsetWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight) - parseFloat(style.borderLeft) - parseFloat(style.borderRight) - parseFloat(style.marginLeft) - parseFloat(style.marginRight);
}
6
Jacque Goupil

Vous pouvez utiliser offsetWidth. Reportez-vous à ceci post et question pour plus.

console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px");
div {border: 1px solid #F00;}
<div style="width: 100%; height: 10px;"></div>
3
Kris Roofe

Essayez jQuery:

$("#banner-contenedor").width();
2
Reuben