Estoy tratando de leer el ancho de un div sin jQuery. El código que estoy usando es:

Js:

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

Html:

<div id="window">
    <p>Lorem ipsum dolor sit amet.</p>
</div>

Css:

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

No entiendo por qué esto no funciona, he buscado en todo este sitio y en Google y no puedo encontrar una solución. No quiero usar jQuery para esto (es un pequeño script HTML5 personalizado, así que no necesito esa gran biblioteca para una pequeña cosa) e incluso cuando pruebo el método jQuery, todavía no funciona.

1
JacobTheDev 25 jun. 2011 a las 23:48

5 respuestas

La mejor respuesta

No está garantizado que document.getElementById() funcionará (es decir, devolverá el elemento requerido) antes de que el DOM esté listo. Entonces intenta:

window.onload = function() { // removed the name to avoid some IE leaks
    var windowwidth = parseInt(document.getElementById("window").style.width);
    alert(windowwidth);
}
2
davin 25 jun. 2011 a las 19:52

Si desea ver cómo lo hace jQuery, aquí está el enlace a la fuente: https://github.com/jquery/jquery/blob/master/src/dimensions.js

1
Chris Laplante 25 jun. 2011 a las 20:09

No lea la propiedad de estilo, lea el ancho real del elemento:

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

offsetWidth es lo que el navegador dice que es el ancho, que puede ser diferente de lo que está configurando con CSS si, por ejemplo, el contenido lo amplía más.

2
Mark Kahn 25 jun. 2011 a las 20:10

Puede obtener style.width solo después de dibujar el elemento. Intenta poner tu código en setTimeout (). A veces me ayuda

window.onload = function(){
    setTimeout(
       function(){ alert(document.getElementById('window').style.width); },
       200
    );
}
0
redexp 25 jun. 2011 a las 20:16

Usaría jQuery para hacer tal cosa. Puede encontrar exactamente lo que desea aquí: http://api.jquery.com/width/

0
ju5tu5 25 jun. 2011 a las 19:52