elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Guía actualizada para evitar que un ransomware ataque tu empresa


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  CSS+javascript Obtener ancho de un div		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: CSS+javascript Obtener ancho de un div  (Leído 17,434 veces)
‭lipman


Desconectado Desconectado

Mensajes: 3.062



Ver Perfil WWW
CSS+javascript Obtener ancho de un div
« en: 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
  1. <style type="text/css">
  2. #div {
  3. 	width: 100px;
  4. 	height: 100px;
  5. 	background-color: red;
  6. 	position:absolute;
  7. 	left:100px;
  8. 	top:20px;
  9. }
  10. </style>

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

Código
  1. <script language="javascript">
  2.  
  3. function cargar() {
  4. css = document.getElementById("div").style;
  5. alert(css.width);
  6. }
  7.  
  8. </script>
  9.  

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
  1. <div id="div" style="width:100px ">Ejemplo</div>
  2.  

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
  1. 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!
En línea
Twitter: jmlipman

http://delanover.com
xassiz~


Desconectado Desconectado

Mensajes: 457



Ver Perfil WWW
Re: CSS+javascript Obtener ancho de un div
« Respuesta #1 en: 12 Diciembre 2010, 13:02 pm »
Código
  3. <style type="text/css">
  4. #div {
  5. 	width: 100px;
  6. 	height: 100px;
  7. 	background-color: red;
  8. 	position:absolute;
  9. 	left:100px;
  10. 	top:20px;
  11. }
  13. <script language="javascript">
  14. function cargar() {
  15. 	css = document.getElementById("div");
  16. 	alert(css.scrollWidth);
  17. } 
  19. </head>
  20. <body onLoad="cargar();">
  21. <div id="div">PoC</div>
  22. </body>
  23. </html>
  24.  
Saludos :D
En línea
#ka0labs
#byte-inside
#twitter
‭lipman


Desconectado Desconectado

Mensajes: 3.062



Ver Perfil WWW
Re: CSS+javascript Obtener ancho de un div
« Respuesta #2 en: 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?
En línea
Twitter: jmlipman

http://delanover.com
Riki_89D


Desconectado Desconectado

Mensajes: 851


BCN CITY


Ver Perfil
Re: CSS+javascript Obtener ancho de un div
« Respuesta #3 en: 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
  1. function Valor()
  2. {
  3. css = document.getElementById("Capa");
  4. Color_Fondo = css.style.backgroundColor;
  5. }
  6.  

para obtener por ejemplo el TOP,teniendo en cuenta que en el div tienes esto:
Código
  1. <div id="Capa" style="....margin-top: 30px;">
  2.  

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

pues la cosa seria lo mismo :S


Código
  1. function Valor()
  2. {
  3. css = document.getElementById("Capa");
  4. TOP = css.style.marginTop;
  5. }
  6.  


en fin,pruebalo,ami me funcionan perfect!


saludos
« Última modificación: 13 Diciembre 2010, 10:38 am por Riki_89D » En línea
‭lipman


Desconectado Desconectado

Mensajes: 3.062



Ver Perfil WWW
Re: CSS+javascript Obtener ancho de un div
« Respuesta #4 en: 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
  3. <title>Pagina</title>
  4. <style type="text/css">
  5.  
  6. #ejemplo {
  7. 	background-color:red;
  8. 	height:100px;
  9. 	width:50px;
  10. }
  12. <script language="javascript">
  13.  
  14. function obtener() {
  15. css = document.getElementById("ejemplo");
  16. alert(css.style.height);
  17. }
  18.  
  19.  
  21. </head>
  23. <div id="ejemplo" onClick="obtener()">a</div>
  24.  
  25. </body>
  26. </html>
  27.  

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
  1. <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!
En línea
Twitter: jmlipman

http://delanover.com
xassiz~


Desconectado Desconectado

Mensajes: 457



Ver Perfil WWW
Re: CSS+javascript Obtener ancho de un div
« Respuesta #5 en: 15 Diciembre 2010, 15:22 pm »
Si el CSS es externo, tienes que usar StyleSheets.rules
En línea
#ka0labs
#byte-inside
#twitter
‭lipman


Desconectado Desconectado

Mensajes: 3.062



Ver Perfil WWW
Re: CSS+javascript Obtener ancho de un div
« Respuesta #6 en: 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?
En línea
Twitter: jmlipman

http://delanover.com
~ Yoya ~
Wiki

Desconectado Desconectado

Mensajes: 1.125



Ver Perfil
Re: CSS+javascript Obtener ancho de un div
« Respuesta #7 en: 15 Diciembre 2010, 21:29 pm »
Usando prototype!
Código
  3. <title>Pagina</title>
  4.     <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
  5. <style type="text/css">
  6.  
  7. #ejemplo {
  8. 	background-color:red;
  9. 	height:100px;
  10. 	width:50px;
  11. }
  13.  
  14. <script language="javascript">
  15.  
  16. function obtener() {
  17.    var dimenciones = $('ejemplo').getDimensions();
  18.    alert('El ancho es: '+dimenciones.width+ "px\nEl alto es: "+dimenciones.height+'px');
  19. }
  20.  
  21.  
  23. </head>
  25. <div id="ejemplo" onClick="obtener()">a</div>
  26.  
  27. </body>
  28. </html>


getDimensions
En línea
Mi madre me dijo que estoy destinado a ser pobre toda la vida.
Engineering is the art of balancing the benefits and drawbacks of any approach.
‭lipman


Desconectado Desconectado

Mensajes: 3.062



Ver Perfil WWW
Re: CSS+javascript Obtener ancho de un div
« Respuesta #8 en: 19 Diciembre 2010, 00:22 am »
Asombroso..  :o

Muchas gracias!
En línea
Twitter: jmlipman

http://delanover.com
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Como sacar el ancho y el alto de un Div solamente con javascript
Desarrollo Web 		z3nth10n 4 3,672 Último mensaje 13 Noviembre 2012, 17:04 pm
por hacked arce
Obtener json con javascript
Desarrollo Web 		lucheano 2 2,221 Último mensaje 29 Noviembre 2017, 05:18 am
por Luis Leon B
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines