Hola.
¿Como podría incrementar el valor de un atributo css dinámicamente?
¿por ejemplo para incrementar el color de un objeto asignado con css, por ejemplo un h1 durante el mouseover?. Gracias.
03/06/2004, 01:40
| ||||
| ||||
| Incrementar valor en atributo css Hola. ¿Como podría incrementar el valor de un atributo css dinámicamente? ¿por ejemplo para incrementar el color de un objeto asignado con css, por ejemplo un h1 durante el mouseover?. Gracias. |
|
03/06/2004, 05:54
| ||||
| ||||
| Por ejemplo esto? Código HTML: <html> <head> <title>Untitled</title> <style> #texto{border:solid 1px black; width:400px; height:200px; padding:10px; font-face:verdana; font-size:10px; line-height:10px; overflow:auto;} </style> <script> tamanioFuente=10; function tamanio(cuanto){ tamanioFuente+=cuanto; document.getElementById("texto").style.fontSize=(tamanioFuente)+"px"; document.getElementById("texto").style.lineHeight=(tamanioFuente)+"px"; }</script> </head> <body> <div id="texto">Pepito pepote pepón Pepito pepote pepón Pepito pepote pepón Pepito pepote pepón Pepito pepote pepón Pepito pepote pepón Pepito pepote pepón Pepito pepote pepón Pepito pepote pepón </div> <input type="button" onmouseover="if(document.getElementById('sobre').checked){pepe=setInterval('tamanio(3)',500)}" onmouseout="if(document.getElementById('sobre').checked){clearInterval(pepe)}" onclick="tamanio(3)" value="crecer"> <input type="button" onmouseover="if(document.getElementById('sobre').checked){pepe=setInterval('tamanio(-3)',500)}" onmouseout="if(document.getElementById('sobre').checked){clearInterval(pepe)}" onclick="tamanio(-3)" value="decrecer"><br> <input type="checkbox" id="sobre"> Que crezca o disminuya al dejar el ratón encima del botón. </body> </html>
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. Última edición por KarlanKas; 03/06/2004 a las 05:57 Razón: Corregir pequeños detalles |
|
03/06/2004, 05:59
| ||||
| ||||
| Si tienes dudas al respecto pregunta. Que para eso estamos! En el tema del color es mejor que emplees el formato RGB: color:RGB(255,100,100) document.getElementById("cosa").style.color="rgb(2 55,100,100)"; Pero pregunta si dudas!
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
03/06/2004, 10:34
| ||||
| ||||
| Interesante Muy simpático, y fácil de adaptar a diferentes situaciones. Tengo que estudiar la opción de ponerle un rango, para que no haga operaciones infinitamente. Creo que es con for. Luego haré preguntas más específicas, ya que no es justo que uno encargue que le hagan la tarea a uno.  |
|
03/06/2004, 10:49
| ||||
| ||||
| Fíjate en el setInterval que pongo en los botones. Se activa si está chequeado el checkbox. Su sintaxis creo que te servirá para lo que quieres.
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
03/06/2004, 14:08
| ||||
| ||||
| No, eso mejor ponlo en la función: function tamanio(cuanto){ if(tamanioFuente<100 && tamanioFuente>9){ tamanioFuente+=cuanto;} document.getElementById("texto").style.fontSize=(t amanioFuente)+"px"; document.getElementById("texto").style.lineHeight= (tamanioFuente)+"px"; }
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. Última edición por KarlanKas; 03/06/2004 a las 14:09 |
|
04/06/2004, 18:12
| ||||
| ||||
| Unas dudas Modifiqué un poco el script anterior para resolver unas dudas: <html> <head> <script> tamanioFuente=10; function tamanio(cuanto){ if (tamanioFuente<100 && tamanioFuente>9) { tamanioFuente+=cuanto;} document.getElementById("texto").style.fontSize=(t amanioFuente)+"px";} function pepe() {setInterval('tamanio(5)',50);} </script> </head> <body> <div id="texto2">Juanito</div> <a href="#" onmouseover="pepe()">Crece Pepito crece</a> <div id="texto">Pepito</div> </body> </html> El document.getElementById está en términos de "texto", sólo modifica a este id, por lo que para modificar a Juanito habría que hacer una función tamanioFuenteJuan, y una función juan(). ¿Cómo puedo hacerla con id´s para reutilizar la función tamanio? <html> <head> <script> tamanioFuente=10; function tamanio(cuanto){ if (tamanioFuente<100 && tamanioFuente>9) { tamanioFuente+=cuanto;} document.getElementById(Id).style.fontSize=(tamanioFuente)+"px";} function pepe(Id) {setInterval('tamanio(5)',50);} </script> </head> <body> <a href="#" onmouseover="pepe(texto2)">Crece Juanito crece</a> <div id="texto2">Juanito</div> <a href="#" onmouseover="pepe(texto)">Crece Pepito crece</a> <div id="texto">Pepito</div> </body> </html> Última edición por Rafael; 04/06/2004 a las 18:14 |
|
07/06/2004, 09:10
| ||||
| ||||
| Te he corregido un par de cosas y añadida alguna. Dime que te parece. Código HTML: <html> <head> <script> ttexto=10; ttexto2=10; var juan; var tamanioFuente function tamanio(cuanto,que){ eval("t"+que+"+=cuanto"); tamanioFuente=eval("t"+que); if (tamanioFuente<100 && tamanioFuente>9) { document.getElementById(que).style.fontSize=(tamanioFuente)+"px";} } function pepe(aumento,Id){ clearInterval(juan); juan=setInterval('tamanio('+aumento+',"'+Id+'")',50);} </script> </head> <body> <a href="#" onmouseover="pepe(5,'texto2')" onmouseout="pepe(-5,'texto2')" > Crece Juanito crece</a><br> <br> <a href="#" onmouseover="pepe(5,'texto')" onmouseout="pepe(-5,'texto')" > Crece Pepito crece</a> <br> <br> <br> <br> <div id="texto">Pepito</div><div id="texto2">Juanito</div> </body> </html>
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
07/06/2004, 10:19
| ||||
| ||||
| Gracias mil Estóy todavía verde en esto de los scripts, pero gracias a la ayuda que brindan todos los del foro se aprende. El ejemplo es muy claro y usas dos cosas que me habían costado entender, el cómo se pasa el valor de una variable de función a función y cómo se pone una función en función de dos variables.  Pues a seguir estudiando. Sólo una duda (por el momento): ¿Qué hace la cadena "t"? Última edición por Rafael; 07/06/2004 a las 10:21 |
|
07/06/2004, 10:40
| ||||
| ||||
| Rafael, me encanta ayudarte! Es una suerte encontrar a alguien que no quiere que se le saquen las castañas del fuego, sino que quiere aprender. Si tienes cualquier duda con cualquier código de este hilo no tienes más que preguntar. Un saludo!
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
07/06/2004, 13:42
| ||||
| ||||
| Antes permíteme que te explique qué hace el comando eval. Eval evalúa (valga la redundancia) una cadena de texto como si fuera código. Esto no tendría mayor enjundia si no fuera porque se pueden emplear variables para realizar esa cadena de texto. Así, si ponemos este código: <script> pepe="alcachofa"; juan="pepe"; alert(juan) </script> aparecerá una alerta con el texto "pepe" en su interior. Pero si ponemos: <script> pepe="alcachofa"; juan="pepe"; eval("alert("+juan+")"); </script> aparecerá una alerta con el texto "alcachofa". ¿Por qué? porque eval considera el contenido de juan (pepe) como una variable, la variable pepe. Y el contenido de pepe es "alcachofa". Expicado esto vamos con el t. Cada uno de las capas debe tener un tamaño de fuente distinto ya que si no emplearían la misma variable para el tamaño del texto. Y si ampliamos una de las fuentes hasta 100 al ir a aumentar el tamaño de la fuente de la otra capa nos encontraremos con que ésta parte del tamaño 100. Es por eso que tenemos que poner una variable para el tamaño de fuente de cada capa. Ahora unimos las dos cosas: al poner esta sentencia: eval("t"+que+"+=cuanto"); estamos modificando las variables ttexto y ttexto2 ("t"+contenido de que que puede ser o "texto" o "texto2")añadiéndoles el contenido de cuanto. Luego para no estar con el eval para arriba y para abajo lo pasamos a una variable normal, es decir, tamanioFuente: tamanioFuente=eval("t"+que); Si te fijas en el comienzo del script hay 2 variables definidas: ttexto y ttexto2, en previsión de su próximo uso de la forma que te he indicado antes. No sé si me he explicado bien. Si no lo he hecho comprensible por favor, hazmelo saber. Un saludo!
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. Última edición por KarlanKas; 07/06/2004 a las 13:46 |
|
08/06/2004, 13:50
| ||||
| ||||
| Ok, Eval en realidad es como un "oye, me puedes decir que es lo que dice", "o cual es el resultado de", no es una operación de true or false, sino devuelve una cadena o un valor, ¿no?. De hecho write también lo hace pero eval es para uso interno, no como salida, ¿no?. Los signos (positivos) +mas+ son parte de la sintaxis de esta forma de eval, ¿ok? El operador string += está dentro de los corchetes para separarlo de los signos +mas+, aunque la redacción debería ser fuera de ellos, ¿ok? Preguntas: ¿Por que dos veces eval? El segundo eval se asigna a tamaniofuente, pero el primero ¿no se queda volando? y una respecto al setInterval, que despues ampliaré... ¿El proceso entero es evaluado toooodo el tiempo, aún cuando ya haya alcanzado los 9 ó 100 px,? ¿no es en ese sentido consumir recursos innecesariamente? ¿o es tan poco que no importa?. y comento que lo ampliaré porque tengo que revisar otros scripts para ver si el loop lo corto o se mantiene.  |
|
09/06/2004, 02:13
| ||||
| ||||
| Efectivamente, eval es como un write pero dentro del código... escribe código y lo interpreta. Si pones: eval("al"+"er"+"t("+"'Qu"+"e v"+"iv"+"a Yo'"+");"); verás como a parte de escribirlo lo interpreta como código JS. En la siguiente línea: tamanioFuente=eval("t"+que); vamos a centrarnos en el eval: eval("t"+que); que es una variable que tiene como contenido el id de la capa que manejamos, no? Al utilizar el eval lo que estamos haciendo es manejar una variable exclusiva de ese que: Estamos manejando la variable ttexto (t+texto) o ttexto2 (t+texto2). Sería como usar esto: if(que=="texto"){ tamanioFuente=ttexto; } else{ tamanioFuente=ttexto2; } No sé si me explico... Y el segundo: eval("t"+que+"+=cuanto"); lo que hace es lo mismo: a la variable ttexto (t+texto) o a la variable ttexto2 (t+texto2) le añade el valor de la variable cuanto. En el siguiente te contesto lo del set interval. Es que estoy en el trabajo y temo que me hagan cerrar este bicho...
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
09/06/2004, 14:39
| ||||
| ||||
| Creo que ya Veamos: eval("t"+que+"+=cuanto"); 1) ¿las comillas es para aislar una cadena de texto...?, no creo ya que cuanto también es una variable... ¿entonces son una especie de paréntesis? Ok. Eval reescribe una función nueva cuyas variables siguen activas. Suponiendo que: que=texto el resultado de eval sería: ttexto+=cuanto, y ya que ttexto tiene un valor asignado 10 se va sumando. tamanioFuente=eval("t"+que); a estas alturas va trabajando como puros datos numéricos, en este caso ttexto no mide ya 10 sino 15 por la suma de cuanto. El que va guardando en realidad la suma es ttexto, claro, por el poerador de asignación +=. Última edición por Rafael; 09/06/2004 a las 14:42 |
|
09/06/2004, 14:45
| ||||
| ||||
| Me aurorespondo... Editando y releyendo el post anterior me respondí varias cosas. Las comillas si son una cadena de texto, que despues del eval se vuelven activas otra vez. Ok. YAAAAAAAAAAA le entendí al eval.  Solo queda lo del setInterval, que aparentemente si se queda en un loop en onMouseOut. 'tamanio('+aumento+',"'+Id+'")' La anidación de las comillas y los +... a ver cambio los ' por " y viveversa(perdón, la costumbre). "tamanio("+aumento+",'"+Id+"')" ¿por qué los + y las ' al rededor de id? Última edición por Rafael; 09/06/2004 a las 14:54 |
|
09/06/2004, 16:12
| ||||
| ||||
| juan=setInterval('tamanio('+aumento+',"'+Id+'")',5 0);} Veamos, lo que hace este comando es que cada 50 milisegundos se ejecute la función tamanio pasando los valores contenidos en aumento y en Id. Aumento, como es un número no tiene que ir entre comillas, pero Id sí, porque es una palabra. Qué ocurriría si no lo ponemos entre comillas? que lo tomaría como el nombre de una variable, y buscaría su valor. Y si no tiene valor esa variable salta el error, o si se pretende hacer una cosa con el contenido de esa variable que no es posible (como hallar la raiz cuadrada de "zapato" por ejemplo). Entonces, el lío de comillas viene porque la función que ejecuta el setInterval debe estar entre comillas. Así se debe poner: setInterval("pepe()",40); entonces, qué ocurre cuando un valor debe ir entre comillas tb? que se pone: setInterval("pepe('juan')",40); o también se puede poner: freson="juan" setInterval("pepe('"+freson+"')",40); es decir, se abre la cadena de texto para meter dentro el valor de freson. Es una especie de eval en este aspecto. Entonces en lo qe has preguntado, se pone el contenido de la variable Id entre comillas para que no lo tome como una variable (acuerdate del ejemplo de la alcachofa). No sé si me expliqué bien...
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
09/06/2004, 17:04
| ||||
| ||||
| Para que no siga cambia esto: if (tamanioFuente<100 && tamanioFuente>9) { document.getElementById(que).style.fontSize=(taman ioFuente)+"px";} por esto: if (tamanioFuente<100 && tamanioFuente>9) { document.getElementById(que).style.fontSize=(taman ioFuente)+"px";} else{clearInterval(juan)} 
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
|
10/06/2004, 09:07
| ||||
| ||||
| Gracias mil Mil gracias por la paciencia y tiempo para resolver cada duda. Te comentaba ya que uno tiene el compromiso de estudiar más. Trataré de aportarle un poco más al foro html y css que es mi fuerte, solo que con lo rápido que contestan los maestros es difícil... (que conste que no pido que se tarden en responder). Nos vemos en el siguiente post. |
|
10/06/2004, 13:45
| ||||
| ||||
| Descuida Rafael! Que me encanta ayudar, no te preocupes que no molestas! Y me gusta la forma que tienes de devolver el favor: ayudar a los demás Cualquier otra duda ya sabes donde estoy!
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
