Ver Mensaje Individual
  #2 (permalink)  
Antiguo 03/05/2015, 11:28
Avatar de Alexis88
Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años, 1 mes
Puntos: 977
Respuesta: Declaracion rechazada. ¿?

Bienvenido a FDW.

El problema está en que estás intentando tomar el valor de la posición vertical del elemento con una propiedad que es establecedora, es decir, que solo debe de usarse para establecer un valor, por lo que, aunque en la hoja de estilos establezcas una posición vertical, la primera vez no la obtendrás, pero sí en los siguientes intentos si entre ellos estableces un valor pero en JavaScript en la propiedad style.propiedad. Para evitar esto, puedes leer directamente el valor indicado en la hoja de estilos mediante la colección de hojas de estilos styleSheets, luego a su propiedad cssRules y ya a partir de ahí, puedes acceder al valor de la propiedad con style.propiedad.

Código Javascript:
Ver original
  1. document.styleSheets[a].cssRules[b].style.propiedad

En donde a es el número de hoja de estilo en el documento en donde se encuentra el valor de la propiedad que deseas tomar del elemento en cuestión, mientras que b es el número de regla dentro de la hoja de estilos, o sea, el número de bloque en el cual se encuentran definidas las propiedades del elemento a modificar.

Otro error que noto que cometes es este:

Código Javascript:
Ver original
  1. document.getElementById("bid01").style.top + "100px"

De esa forma, estás concatenando valores ya que, si bien la primera vez no se detecta un valor para style.top, por lo cual se cumple la primera condición ya que comparas dos cadenas, una vacía y la otra que es '650px', terminas estableciendo el valor de 100 píxeles, pero a partir de la segunda en adelante, haces "100px" + "100px", lo cual resulta en "100px100px". Para evitar eso, debes de tomar el valor numérico de la propiedad, el cual puedes obtener utilizando la función parseInt, pero además, la suma se debe de completar de la forma + 100 + "px" porque si sumas un valor numérico con una cadena, se unirán en una sola cadena.

Dicho todo esto, una de las formas de hacer lo que buscas sería la siguiente:

Código Javascript:
Ver original
  1. if (parseInt(document.styleSheets[0].cssRules[0].style.marginTop) <= 650){
  2.     document.styleSheets[0].cssRules[0].style.marginTop = parseInt(document.styleSheets[0].cssRules[0].style.marginTop) + 100 + "px";
  3. }
  4. else{
  5.     document.styleSheets[0].cssRules[0].style.marginTop = "-30px";
  6. }

Sin embargo, existen maneras más cortas (en cuestión de escritura). Una de ellas es tomando el valor computado de la propiedad del elemento, para lo cual debes de usar el método getComputedStyle, el cual es obtenedor (solo puedes obtener valores, no establecerlos) y para establecer los valores, puedes seguir usando las propiedades style.propiedad:

Código Javascript:
Ver original
  1. if (parseInt(getComputedStyle(bid01).marginTop) <= 650){
  2.     bid01.style.marginTop = parseInt(getComputedStyle(bid01).marginTop) + 100 + "px";
  3. }
  4. else{
  5.     bid01.style.marginTop = "-30px";
  6. }

Y una manera aún más corta (siempre en cuestión de escritura) es utilizando la propiedad offsetTop (que también es solo obtenedora), la cual devuelve el valor numérico solamente, por lo que ya no es necesario obtener el mismo con parseInt:

Código Javascript:
Ver original
  1. if (bid01.offsetTop <= 650){
  2.     bid01.style.marginTop = bid01.offsetTop + 100 + "px";
  3. }
  4. else{
  5.     bid01.style.marginTop = "-30px";
  6. }

Primera forma
Segunda forma
Tercera forma

Como verás, con cualquiera de estas tres formas puedes obtener el resultado deseado, aunque con la primera debes de tener cuidado ya que, si llegaras a trabajar con clases y estas afectan a más de un elemento, puedes terminar obteniendo resultados no deseados si solo pretendes modificar los estilos de un elemento en particular. Por cierto, quité la segunda condición porque se sobreentiende y, para el ejemplo, utilicé la propiedad marginTop, para establecer el margen superior con respecto al elemento anterior a este, pero si deseas establecer el margen con respecto al documento (sin importar los demás elementos), tienes que establecer una posición absolute para poder usar la propiedad top.

P.D.: También puedes obtener al elemento por su id escribiéndolo directamente, como puedes ver en los ejemplos y si no deseas repetir líneas de código, como en donde se toma el valor del margen superior, puedes guardarlo en una variable y reutilizar la misma.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 03/05/2015 a las 16:42 Razón: Explicación