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 originaldocument.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 originaldocument.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 originalif (parseInt(document.styleSheets[0].cssRules[0].style.marginTop) <= 650){
document.styleSheets[0].cssRules[0].style.marginTop = parseInt(document.styleSheets[0].cssRules[0].style.marginTop) + 100 + "px";
}
else{
document.styleSheets[0].cssRules[0].style.marginTop = "-30px";
}
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 originalif (parseInt(getComputedStyle(bid01).marginTop) <= 650){
bid01.style.marginTop = parseInt(getComputedStyle(bid01).marginTop) + 100 + "px";
}
else{
bid01.style.marginTop = "-30px";
}
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 originalif (bid01.offsetTop <= 650){
bid01.style.marginTop = bid01.offsetTop + 100 + "px";
}
else{
bid01.style.marginTop = "-30px";
}
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