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

Question

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 ?

Answer 1

document.getElementById('banner-contenedor').clientWidth

Answer 2

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

(I.e : this.offsetWidth='50px' o var w=this.offsetWidth )

Vous pourriez aussi aimer cette réponse sur SO.

Answer 3

Aucune réponse ne fait ce qui a été demandé en JS vanille, et je veux une réponse vanille donc je l'ai faite moi-même.

La largeur du client inclut le rembourrage et la largeur de l'offset inclut 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);
}

EDITAR: getComputedStyle n'est pas standard, et peut retourner des valeurs dans des unités autres que les pixels. Certains navigateurs renvoient également une valeur qui prend en compte la barre de défilement si l'élément en possède une (ce qui donne une valeur différente de la largeur définie dans CSS). Si l'élément est doté d'une barre de défilement, vous devrez calculer manuellement la largeur en supprimant les marges et les marges de l'élément. 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);
}

Cela dit, ce n'est probablement pas une réponse que je recommanderais de suivre avec mon expérience actuelle, et j'aurais recours à des méthodes qui ne reposent pas autant sur JavaScript.

Answer 4

Vous pouvez utiliser offsetWidth . Se référer à ce poste y pregunta pour plus.

console.log("width:" + document.getElementsByTagName("div")[0].offsetWidth + "px");

div {border: 1px solid #F00;}

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

Answer 5

Essayez jQuery :

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