Foros del Web » Programando para Internet » Javascript »

como puedo sacar la posicion de el background-image

Estas en el tema de como puedo sacar la posicion de el background-image en el foro de Javascript en Foros del Web. como puedo sacar la posición de el background-image con javascript @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ...
  #1 (permalink)  
Antiguo 24/11/2011, 03:48
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 5 meses
Puntos: 8
como puedo sacar la posicion de el background-image

como puedo sacar la posición de el background-image
con javascript
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  5. <title>contador</title>
  6. <style type="text/css">
  7. <!--
  8. .menu ul li{
  9.     background-image: url(jjjj.gif);
  10.     background-position: 0px 0px;
  11.     background-repeat: no-repeat;
  12.     list-style-type: none;
  13. }
  14. -->
  15.     </style>
  16. <script type="text/javascript">
  17. function posicion(){
  18. var cambiar = document.getElementById('me').backgroundPosition;
  19. var unos = document.getElementById("uno").innerHTML = cambiar;  
  20.                        }
  21. </script>
  22. </head>
  23. <body >
  24. <div id="uno"></div>
  25. <div class="menu">
  26.                 <ul>
  27.                       <li id="me" onClick="posicion()" >home</li>
  28.                 </ul>
  29. </div>
  30. </body>
  31. </html>
  #2 (permalink)  
Antiguo 24/11/2011, 07:12
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: como puedo sacar la posicion de el background-image

tienes un error
Cita:
document.getElementById('me').style.backgroundPosition;
esto no es válido. en este caso has de usar getComputedStyle
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #3 (permalink)  
Antiguo 24/11/2011, 10:00
Avatar de Franz1628  
Fecha de Ingreso: marzo-2007
Ubicación: Lima - Perú
Mensajes: 145
Antigüedad: 17 años
Puntos: 26
Respuesta: como puedo sacar la posicion de el background-image

Te puede funcionar cuando pones los estilos en el atributo style .
Algo así
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  3. <title>contador</title>
  4.  
  5. <script type="text/javascript">
  6. function posicion(){
  7. var cambiar = document.getElementById('me').style.backgroundPosition;
  8. var unos = document.getElementById("uno").innerHTML = cambiar;  
  9.                  }
  10. </head>
  11. <body >
  12. <div id="uno"></div>
  13. <div class="menu">
  14.                 <ul>
  15.                       <li id="me" style="background-position: 0px 0px;" onClick="posicion()" >home</li>
  16.                 </ul>
  17. </div>
  18. </body>
  19. </html>
__________________
En mi Blog puedes ver articulos javascript y más...
@Franz1628
  #4 (permalink)  
Antiguo 24/11/2011, 13:29
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: como puedo sacar la posicion de el background-image

Franz1628, no se trata de leer la etiqueta style si no de leer css externo. en ese caso puede usar cssRules y rules o getComputedStyle
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 18/02/2012 a las 17:12
  #5 (permalink)  
Antiguo 24/11/2011, 13:34
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 5 meses
Puntos: 8
Respuesta: como puedo sacar la posicion de el background-image

Cita:



muy interesante
como siempre
mil gracias y que dios bendiga a mis amigos
  #6 (permalink)  
Antiguo 24/11/2011, 13:37
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 5 meses
Puntos: 8
Respuesta: como puedo sacar la posicion de el background-image

Cita:
Iniciado por Franz1628 Ver Mensaje
Te puede funcionar cuando pones los estilos en el atributo style .
Algo así
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  3. <title>contador</title>
  4.  
  5. <script type="text/javascript">
  6. function posicion(){
  7. var cambiar = document.getElementById('me').style.backgroundPosition;
  8. var unos = document.getElementById("uno").innerHTML = cambiar;  
  9.                  }
  10. </head>
  11. <body >
  12. <div id="uno"></div>
  13. <div class="menu">
  14.                 <ul>
  15.                       <li id="me" style="background-position: 0px 0px;" onClick="posicion()" >home</li>
  16.                 </ul>
  17. </div>
  18. </body>
  19. </html>
fran isabel tiene razón y esta muy interesante lo que dice
pero tu aporte es muy bueno, con esto voy a mejorar el sistema que me ayudaste hacer de botones con movimiento ya que necesito tomar el valor dependiendo de la posición inicial

Última edición por jor_0203; 24/11/2011 a las 13:53
  #7 (permalink)  
Antiguo 25/11/2011, 04:13
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 5 meses
Puntos: 8
Respuesta: como puedo sacar la posicion de el background-image

esta es la solución solo hay que probarla en varios navegadores
llegue ha esto gracias a IsaBelM la cual me dio la contestación y solo fui modificando el código, para que sea mas amistoso, aunque ninguno habla de como usar background-position fui poco a poco jugando con valores hasta encontrarlos
mil gracias isabel ya que esto puede ayudar a muchos


pero alguien sabe para que el el valor null en este código

aparte abajo les dejo otro código, para que vean lo sencillo que es esto y se que le va ha servir de mucho, prueben los codigos
en total de códigos 2
este es el primer código
Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.  <style>  
  5. #ttt{
  6.     position: absolute;
  7.     background-color: red;
  8.     left:14px;
  9.     top:178px;
  10.     height:39px;
  11.     background-position: 0 -30px;
  12.     }
  13. div.special{
  14.             background-position: 0 -50px;
  15.             background-color: red;
  16.             height: 100px;
  17.             width:100px;
  18.             }                
  19.     </style>  
  20. <script>  
  21. function solo_explorer() {
  22.  var valor1 = document.getElementById("ddd").currentStyle.backgroundPositionY;
  23.  var valor2 = document.getElementById("ddd").currentStyle.backgroundPositionX;
  24. document.getElementById("ou").innerHTML =  valor2 +" "+ valor1;
  25.                          }
  26. function cualquier_navegador(){  
  27. var elem = document.getElementById("ttt");  
  28. var valor = window.getComputedStyle(elem,null).getPropertyValue("background-position");  
  29. document.getElementById("output").innerHTML = valor;  
  30.                               }  
  31. </script>  
  32. </head>
  33. <body>
  34. <div id="ddd" class="special">explorer</div>
  35. <input type="button" value="solo explorer" onclick="solo_explorer()" />
  36. <div id="ou">valores de la capa por explorer</div>
  37. <hr />
  38. <br />
  39. <br />
  40. <br />
  41. <div id="ttt">cualquier navegador menos explorer</div>  
  42. <input type="button" value="cualquier navegador" onclick="cualquier_navegador();" />
  43. <div id="output">valores de la capa por cualquier navegador</div>
  44. </body>
  45. </html>

Última edición por jor_0203; 25/11/2011 a las 04:23
  #8 (permalink)  
Antiguo 25/11/2011, 04:25
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 5 meses
Puntos: 8
Respuesta: como puedo sacar la posicion de el background-image

segundo código

Código Javascript:
Ver original
  1. <html>
  2.     <head>
  3.         <title>Computed Style Example</title>
  4.         <style type="text/css">
  5.             div.special {
  6.                 background-color: red;
  7.                 margin: 10px;
  8.                    background-position: 0 -30px;
  9.             }
  10.         </style>
  11.         <script type="text/javascript">
  12.             function getBackgroundColor() {
  13.                 var oDiv = document.getElementById("div1");
  14.                 alert(oDiv.currentStyle.margin);
  15.             }
  16.         </script>
  17.  
  18.     </head>
  19.     <body>
  20.         <div id="div1" class="special">para explorer</div>
  21.         <input type="button" value="Get Background Color" onclick="getBackgroundColor()" />
  22.        
  23.     </body>
  24. </html>
  #9 (permalink)  
Antiguo 25/11/2011, 08:46
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: como puedo sacar la posicion de el background-image

el segundo parámetro (null)
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #10 (permalink)  
Antiguo 25/11/2011, 08:49
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 5 meses
Puntos: 8
Respuesta: como puedo sacar la posicion de el background-image

Cita:
Iniciado por IsaBelM Ver Mensaje
pero porque ponen null
es lo que no entiendo
y que parámetros pueden poner más en vez de null
  #11 (permalink)  
Antiguo 25/11/2011, 08:52
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: como puedo sacar la posicion de el background-image

lee el articulo
Cita:
pseudoElt Optional
A string specifying the pseudo-element to match. Must be null (or not specified) for regular elements.
Cita:
Use with pseudo-elements

getComputedStyle can pull style info off of pseudo-elements (for example, ::after, ::before, ::marker, ::line-marker—see spec here).

.....
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #12 (permalink)  
Antiguo 25/11/2011, 14:27
Avatar de jor_0203  
Fecha de Ingreso: octubre-2011
Ubicación: mexico
Mensajes: 760
Antigüedad: 12 años, 5 meses
Puntos: 8
Respuesta: como puedo sacar la posicion de el background-image

Cita:
Iniciado por IsaBelM Ver Mensaje
lee el articulo
que aporte tan interesante
ya lo entendí
esto vale oro
para todo el que vea este apartado analicenlo esta muy bueno esto y esto puede ser de gran ayuda para todos
aunque esto no seria sin el gran aporte de IsaBelM

Etiquetas: background-image, html, posicion
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 09:53.