CSS+javascript Obtener ancho de un div

‭lipman · 12 Diciembre 2010, 11:26 AM

He estado dándole muchas vueltas a esto y no consigo encontrar "la solución"

Quiro obtener el ancho de un div, y la situación que se me presenta, es que tengo con respecto al CSS algo como:

Código (css) [Seleccionar]

<style type="text/css">
#div {
 width: 100px;
 height: 100px;
 background-color: red;
 position:absolute;
 left:100px;
 top:20px;
}
</style>

Y la forma en la que debería obtener el ancho, debería de ser esta:

Código (javascript) [Seleccionar]

<script language="javascript">

function cargar() {
css = document.getElementById("div").style;
alert(css.width);
}

</script>

Esta función se inicializa al cargar la página (en el onLoad del body), y cuando se ejecuta, no me devuelve absolutamente nada. Para que quede claro, el código CSS funciona perfectamente, es decir, que me genera mi cuadradito rojo. Quisiera saber porqué y cómo arreglarlo, es decir, si hay algún otro método para obtenerlo..

Porque he conseguido que me funcione de dos formas:

1)
Poniendo en el div el ancho:

Código (html4strict) [Seleccionar]

<div id="div" style="width:100px ">Ejemplo</div>

Entonces, si que me salta el alert con valor 100px.

2)
Declarando en javascript antes el valor que quiero obtener, es decir, en este caso, poner justo antes del alert esto:

Código (javascript) [Seleccionar]

css.width="200px";

Pero claro, si tengo un código CSS muy muy extenso, no voy a poder escribirlo en el div, ni a inicializarlo con javascript, por eso que necesito saber cómo puedo obtener el ancho (o cualquier propiedad) de un div, directamente.

Muchas gracias, un saludo!

xassiz~ · 12 Diciembre 2010, 13:02 PM

Código (html4strict) [Seleccionar]


<html>
<head>
<style type="text/css">
#div {
 width: 100px;
 height: 100px;
 background-color: red;
 position:absolute;
 left:100px;
 top:20px;
}
</style>
<script language="javascript">
function cargar() {
 css = document.getElementById("div");
 alert(css.scrollWidth);
} 
</script>
</head>
<body onLoad="cargar();">
<div id="div">PoC</div>
</body>
</html>

Saludos

‭lipman · 12 Diciembre 2010, 13:15 PM

Funciona perfecto xD pero el problema es que quiero implementar esto a diversas propiedades del CSS, es decir, también quiero saber obtener el resto de propiedades, no solo el ancho, como left, top, background-color, etc.

Alguna idea?

Riki_89D · 13 Diciembre 2010, 10:35 AM

Es mas de lo mismo que a echo pablomi,por ejemplo para saber el color del fondo del DIV (background-color)

asin:

Código (javascript) [Seleccionar]


function Valor()
{
css = document.getElementById("Capa");
Color_Fondo = css.style.backgroundColor;
}

para obtener por ejemplo el TOP,teniendo en cuenta que en el div tienes esto:

Código (css) [Seleccionar]


<div id="Capa" style="....margin-top: 30px;">

yo lo pongo asin tu puedes ponerlo en el head como creo que haces

pues la cosa seria lo mismo :S

Código (javascript) [Seleccionar]


function Valor()
{
css = document.getElementById("Capa");
TOP = css.style.marginTop;
}

en fin,pruebalo,ami me funcionan perfect!

saludos

‭lipman · 15 Diciembre 2010, 14:26 PM

Es que como te digo, la intención es ponerlo en el head, dentro de sus respectivos tags de style, pero de esta forma no me funciona.

Mira a ver si te funciona esto:

Código (html4strict) [Seleccionar]


<html>
<head>
<title>Pagina</title>
<style type="text/css">

#ejemplo {
 background-color:red;
 height:100px;
 width:50px;
}
</style>
<script language="javascript">

function obtener() {
css = document.getElementById("ejemplo");
alert(css.style.height);
}


</script>
</head>
<body>
<div id="ejemplo" onClick="obtener()">a</div>

</body>
</html>

A mi esto, no me funciona. Me tendria que saltar un alert diciendo 100px, pero no lo hace. Me salta un alert diciendo nada >.>

En cambio, me funciona si pongo en el div esto:

Código (html4strict) [Seleccionar]

<div id="ejemplo" style="width:10px" onClick="obtener()">a</div>

Pero yo lo que quiero es que quede todo en el head.

Alguna idea? Un saludo!

xassiz~ · 15 Diciembre 2010, 15:22 PM

Si el CSS es externo, tienes que usar StyleSheets.rules

‭lipman · 15 Diciembre 2010, 16:11 PM

Pero a qué se considera externo? A que esté en el head o a que esté en otro archivo y lo importe?

~ Yoya ~ · 15 Diciembre 2010, 21:29 PM

Usando prototype!

Código (html4strict) [Seleccionar]

<html>
<head>
<title>Pagina</title>
    <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
<style type="text/css">
 
#ejemplo {
 background-color:red;
 height:100px;
 width:50px;
}
</style>

<script language="javascript">
 
function obtener() {
   var dimenciones = $('ejemplo').getDimensions();
   alert('El ancho es: '+dimenciones.width+ "px\nEl alto es: "+dimenciones.height+'px');
}
 
 
</script>
</head>
<body>
<div id="ejemplo" onClick="obtener()">a</div>
 
</body>
</html>

getDimensions

‭lipman · 19 Diciembre 2010, 00:22 AM

Asombroso..

Muchas gracias!