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:
<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:
<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:
<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:
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!
<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 :D
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?
Es mas de lo mismo que a echo pablomi,por ejemplo para saber el color del fondo del DIV (background-color)
asin:
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:
<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
function Valor()
{
css = document.getElementById("Capa");
TOP = css.style.marginTop;
}
en fin,pruebalo,ami me funcionan perfect!
saludos
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:
<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:
<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!
Si el CSS es externo, tienes que usar StyleSheets.rules
Pero a qué se considera externo? A que esté en el head o a que esté en otro archivo y lo importe?
Usando prototype!
<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>
(http://img192.imageshack.us/img192/273/ptor.png)
getDimensions (http://api.prototypejs.org/dom/Element/getDimensions/)
Asombroso.. :o
Muchas gracias!