2011-06-03 21 views
8

Estoy tratando de recibir el valor de ancho de CSS original de un objeto mediante JavaScript. Sin embargo, si uso:js propiedades de estilo devuelve en blanco

var originalWidth = document.getElementById(<idOfObject>).style.width; 

Siempre devuelve en blanco. También he notado que cualquier propiedad a la que acceda usando esta sintaxis volverá a estar en blanco. Sé con certeza que el elemento dado existe, desde

alert(document.getElementById(<idOfObject>)); 

me muestra el objeto correcto.

¿Alguien me puede ayudar a resolver este problema?

Respuesta

8

Es probable que trate de obtener el valor que se estableció en hoja de estilo, no directamente como esto:

document.getElementById(<idOfObject>).style.width = '100px'; 

Si desea obtener el ancho de la elemento puede utilizar la propiedad innerWidth:

var width = document.getElementById(<idOfObject>).offsetWidth; 
+0

innerWidth o offsetWidth? Además, agregaré que puedes acceder a las propiedades de estilo en línea, como aquí:

...
marcosfromero

+0

¡Lo he descubierto, tenías razón! ¡Gracias por la respuesta! – Tiddo

+0

Ninguno de ellos, el correcto es clientWidth; offsetWidth devuelve el ancho más el ancho del borde. innerWidth puede no devolver nada si el ancho de la propiedad se establece mediante css externo o incluso con la configuración de estilo – drodsou

0

creo que esto va a funcionar

function getWidth() 
{ 

x = document.getElementById(<idOfObject>) 
return x.offsetWidth; 
} 
1
<div style="width:10%" id="mydiv" > 

O

<div style="width:10px" id="mydiv" > 

var mydiv = document.getElementById("mydiv"); 
var curr_width = mydiv.style.width; 
alert(curr_width); 

Esto funciona para mí

9

Ninguna de las respuestas anteriores era correcta.

La propiedad que busca es clientWidth, pero no en el "estilo"

document.getElementById('idOfObject').clientWidth; 

que funcionará tanto en "ancho" set con CSS externa, Seccion estilo o incluso estilo en línea = "width : 80px"

nota general: no utilice <div width="500">, ya que no tiene ningún efecto

el mencionado offsetWidth es la segunda mejor opción, pero no devuelve la mujer en el desarrollo exacto th set en css, pero ese ancho más el ancho del borde

Otras opciones como innerWidth que funcionan con el objeto window no me funcionaron en divs.

Este extraño problema de realizar style.width no funcionaba correctamente, perdí 2 horas de mi precioso tiempo :-), espero que esta respuesta acorte ese tiempo para cualquier otra persona en el futuro.

Cuestiones relacionadas