Ottieni la larghezza in pixel dall'elemento con lo stile impostato con%?

Question

Ho questo elemento:

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

voglio ottenere è la larghezza in pixel. Ho appena provato questo:

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

Wich ritorna 100%. È possibile ottenere effettivamente la larghezza dell'elemento in pixel con javascript?

Answer 1

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

Answer 2

Prova jQuery:

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

Answer 3

si desidera ottenere la larghezza calcolata. Prova: .offsetWidth

(cioè: this.offsetWidth='50px' o var w=this.offsetWidth)

potrebbero piacerti this answer su SO.

Buona fortuna!

Answer 4

Non una sola risposta fa quello che è stato chiesto in vanilla JS, e voglio una risposta vaniglia così l'ho fatta io stesso.

clientWidth include padding e offsetWidth include tutto il resto (jsfiddle link). Quello che vuoi è ottenere lo stile calcolato (jsfiddle link).

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

MODIFICA: getComputedStyle non standard. Alcuni browser restituiscono un valore che tiene conto della barra di scorrimento se l'elemento ne ha uno (che a sua volta fornisce un valore diverso rispetto alla larghezza impostata in CSS). Se l'elemento ha una barra di scorrimento, dovrai calcolare manualmente la larghezza rimuovendo i margini e i paddings da 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); 
} 

Answer 5

Questo jQuery ha funzionato per me:

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

questo modo si ottiene la larghezza calcolata

http://api.jquery.com/css/

Answer 6

yourItem.style['cssProperty'] 

questo modo è possibile chiamare lo stringa di proprietà in modo dinamico

Answer 7

È possibile utilizzare offsetWidth. Fare riferimento a questo post e question per ulteriori informazioni.

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

div {border: 1px solid #F00;}

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