Foros del Web » Programando para Internet » Javascript »

Obtencion propiedades CSS mediante ID

Estas en el tema de Obtencion propiedades CSS mediante ID en el foro de Javascript en Foros del Web. Hola a todos: Mi problema es el siguiente: no puedo acceder a las propiedades definidas en la hoja de estilos para un imagen a la ...
  #1 (permalink)  
Antiguo 31/12/2005, 07:34
 
Fecha de Ingreso: diciembre-2005
Mensajes: 10
Antigüedad: 18 años, 3 meses
Puntos: 0
Obtencion propiedades CSS mediante ID

Hola a todos:

Mi problema es el siguiente: no puedo acceder a las propiedades definidas en la hoja de estilos para un imagen a la que asigno un identificador (id="imagen") y por extension a las propiedades de ningun otro identificador. Utilizo getElementById() y style pero no se lo que falla. La consola javascript del firefox no da ningun error.

Os envio parte del codigo para que me digais donde esta el error:
En el primer alert no escribe nada para el color
En el segundo dice que la variable no es null.
En el tercero el resultado del parseInt es NaN
Conclusion:no accede a las propiedades del CSS.

<html>

<head>
<STYLE TYPE="text/css">
body { background-color:rgb(0,230,0)}
#imagen {
position:absolute;
left:100px;
top:100px;
z-index:2;
}
#algo { background-color:blue;
color:yellow;
font-weight:bold;
}
</STYLE>

</head>

<body>

<form name=exf1>
<table border=1>
<tr><td colspan=2>Position Of Cursor</td></tr>
<tr><td>X <input type=text name=x value="<unknown>"></td>
<td>Y <input type=text name=y value="<unknown>"></td>
</tr>
</table>
</form>

<span ID="algo">A ver si esto lo cambia</span>
<script type=text/javascript>
alert("color del span "+document.getElementById("algo").style.color) ;
</script>

<img ID="imagen" src="wms.jpeg" width="500" height="600">

<script type=text/javascript>
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;
function getMousePosition(e) {
var _x;
var _y;
var imag;
if (!isIE) {
_x = e.pageX;
_y = e.pageY;
}
if (isIE) {
_x = event.clientX + document.body.scrollLeft;
_y = event.clientY + document.body.scrollTop;
}

imag = document.getElementById("imagen");
if (imag==null) alert("no lee bien la imagen");
else alert("imagen metida en variable");

imagenX = _x - parseInt(imag.style.left) -
imag.width/2;
alert("valor estilo left " + parseInt(imag.style.left));


Os agradezco un monton vuestra ayuda.
De paso: Felices Fiestas.
Un beso.
  #2 (permalink)  
Antiguo 31/12/2005, 08:39
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Qué tal,

a lo que estás accediendo es a los estilos establecidos al elemento concreto al cual accedes mediante su id, pero no a las propiedades definidas en la hoja de estilos.

Para que te devolviera algún valor debería encontrarlo definido en el atributo style del elemento al que accedes.

Te pongo un ejemplo:

Código:
<style type="text/cs">
<!--
#pepe{
   color: #ff0000;
}
</style>
Y defines el elemento pepe en el documento
<span id="pepe"> pepe </span>

Si ahora le pides un alert(document.getElementById('pepe').style.color) te devolverá vacío, porque el elemento de id pepe no tiene atributo style definido.

Si luego de esa línea le pides un

document.getElementById('pepe').style.color = '#00ff00'

le cambiará el color al verde. Si le vuelves a pedir un alert(document.getElementById('pepe').style.color) te devolverá en el alert un #00ff00 porque ahora sí tendrá el atributo establecido.
  #3 (permalink)  
Antiguo 31/12/2005, 11:13
 
Fecha de Ingreso: diciembre-2005
Mensajes: 10
Antigüedad: 18 años, 3 meses
Puntos: 0
Como acceder a las propiedades de CSS desde javascript

Muchas gracias tunait por tu ayuda.

Me gustaria saber ahora si existiera alguna manera de asignarle valor a las propiedades de los elementos desde una hoja de estilos CSS para poder tener separado todo el estilo de la pagina, y que además, poder tener acceso a esos valores desde javascript.
¿Quizas deberia preguntar esto en el foro de css?

Ciao.
  #4 (permalink)  
Antiguo 31/12/2005, 11:30
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
La forma de asignarle valor a las propiedades de los elementos desde la hoja de estilos yá lo estás haciendo bien. El tema es que desde javascript no podrás leerlos accediendo desde el id del elemento.

"Creo" que "teóricamente" se podría acceder a los valores de los elementos de una hoja de estilos, pero yá estaríamos trabajando dentro del elemento style en el elemento head del elemento principal html. Alguna vez intenté ver la forma de trabajar con ellos sin conseguirlo (tampoco me esforcé demasiado así que tampoco sé si realmente se puede hacer de forma fiable)

Pero en el foro de css no podrán ayudarte a averiguar con javascript lo que tengas en tu hoja de estilos.

Tal vez si explicas un poco lo que quieres lograr haya alguna alternativa
  #5 (permalink)  
Antiguo 31/12/2005, 12:02
 
Fecha de Ingreso: diciembre-2005
Mensajes: 10
Antigüedad: 18 años, 3 meses
Puntos: 0
Muchas gracias tunait.

Te explico: mi objetivo es separar todo lo referente al modo de visualizar las cosas en una hoja de estilos que seria un fichero independiente.
Luego, desde las paginas jsp del web poder acceder a esos parametros porque necesito hacer unas operaciones con los margenes de alguna imagen. Asi, no tendria que ir definiendo el estilo de esas imagenes en cada pagina.

Bueno, a ver si me explique bien . En caso de que no pudiera ser, existen otras soluciones menos eficientes.

Gracias. Buen fin de año.
  #6 (permalink)  
Antiguo 31/12/2005, 12:21
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Tal vez podrías entonces declarar los márgenes, además de en la hoja de estilos, dentro de los propios elementos de imagen.

#imagen{
todo lo que quieras
}

<img id="imagen" style="los márgenes" />

Las modificaciones que quieres hacer tiene algo que ver con resoluciones?
  #7 (permalink)  
Antiguo 31/12/2005, 12:23
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 22 años, 7 meses
Puntos: 381
Cita:
Iniciado por MariaMG
Gracias. Buen fin de año.
Gracias, igualmente (si vieras el asado que estoy preparando ...)
  #8 (permalink)  
Antiguo 31/12/2005, 12:36
 
Fecha de Ingreso: diciembre-2005
Mensajes: 10
Antigüedad: 18 años, 3 meses
Puntos: 0
Tunait, no entendi bien lo de los márgenes, si me lo pudieras explicar un poco mas extenso.... , te lo agradeceria.

Lo que quiero hacer es tomar la posicion del raton dentro de la imagen que seria un mapa (por esto tanto lio con los estilos) y sabiendo dónde se encuentra, aplicar unas funciones, que todavia tengo de descubrir, para poder saber las coordenadas: latitud, longitud a las que apunta el cursor del raton dentro de ese mapa.

Asi que un asado para Noche Vieja... mmm ... Mi madre esta preparando langostinos, .
  #9 (permalink)  
Antiguo 02/01/2006, 11:28
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 21 años, 5 meses
Puntos: 317
Hola MariaMG , tunait :

Aprovecho el tema para poner un enlace (hay más adentro)

Interpretar una clase CSS por medio de Javascript

Lo de encontrar objetos por las coordenadas es solamente para IE, hay un ejemplo arriba, pero dejo otro

barra desplazamiento en capa, rueda del raton, netscape-firefox

Si alguien conoce la forma de hacerlo aunque sea con Firefox , que me avise. Lo estoy necesitando desde hace rato.

saludos.
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 05:46.