Leggi la larghezza di un div con JavaScript

Sto cercando di leggere la larghezza di un div senza jQuery. Il codice che sto usando è:

JS:

var windowwidth = parseInt(document.getElementById("window").style.width); window.onload = function start() { alert(windowwidth); } 

HTML:

 

Lorem ipsum dolor sit amet.

CSS:

 #window { height: 250px; margin: 0 auto; width: 600px; } 

Non capisco perché questo non funziona, ho cercato dappertutto questo sito e google e non riesco a trovare una soluzione. Non voglio usare jQuery per questo (è un piccolo script HTML5 personalizzato, quindi non ho bisogno di quell’enorme libreria per una piccola cosa) e anche quando provo il metodo jQuery, non funziona ancora.

Non è garantito che document.getElementById() funzioni (ovvero restituirà l’elemento richiesto) prima che il DOM sia pronto. Allora prova:

 window.onload = function() { // removed the name to avoid some IE leaks var windowwidth = parseInt(document.getElementById("window").style.width); alert(windowwidth); } 

non leggere la proprietà style, leggere la larghezza effettiva dell’elemento:

 window.onload = function(){ alert(document.getElementById('window').offsetWidth); } 

offsetWidth è ciò che dice il browser è la larghezza, che può essere diversa da quella con cui lo si sta impostando con CSS se, ad esempio, il contenuto lo allarga.

Se vuoi vedere come fa jQuery, ecco il link alla fonte: https://github.com/jquery/jquery/blob/master/src/dimensions.js

Vorrei usare jQuery per fare una cosa del genere. Puoi trovare la cosa esatta che desideri qui: http://api.jquery.com/width/

Puoi ottenere style.width solo dopo che l’elemento è stato disegnato. Prova a mettere il tuo codice su setTimeout (). A volte mi aiuta

 window.onload = function(){ setTimeout( function(){ alert(document.getElementById('window').style.width); }, 200 ); }