Advertisement
Guest User

Uso rápido del .css() en JQuery

a guest
Oct 24th, 2014
134
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 1.58 KB | None | 0 0
  1.     Para los que me preguntan, aquí tenéis el código que hace cambiar el color a un simple <p> usando JQuery y                                          
  2.     haciendo scripts. Se puede hacer muy fácil gracias a la etiqueta .css(), que permite modificar parámetros de    
  3.     estilos CSS en etiquetas HTML, en este caso, <p>.
  4. "
  5. <!DOCTYPE html>
  6.     <html>
  7.         <head>
  8.     <title></title>
  9.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>     
  10.       </head>  
  11.         <body>
  12.     <script>
  13.    $(document).ready(function() {
  14.     $("#text").click(function() {
  15.          $("#text").css({"color":"#000"})
  16.        });
  17. });
  18.         </script>  
  19.     <p id="text">Mira! Esto cambia de color!</p>
  20. <style>
  21.  
  22. #text {
  23.     color:#fff;
  24.     position:relative;     
  25. }  
  26.     </style>       
  27.              </body>
  28.             </html>
  29. "
  30.  
  31. Disfrutad.
  32.  
  33.     Básicamente usamos este código
  34. "
  35.     <script>
  36.      $(document).ready(function() {
  37.     $("#[Inserte ID de tu etiqueta HTML]").click(function() {
  38.        $("#[Inserte ID de la misma etiqueta que en el .click()]").css({"estilo","variable"})
  39.       });
  40. });
  41.        </script>
  42. "
  43.  
  44.     Con el .css(), podemos modificar múltiples estilos modificando añadiendo una y otra vez este patrón:
  45.         "$("#ejemplo").css({"estilo","variable","estilo","variable"})"
  46.     Obviamente para que el .css() funcione ha de ponerse el .ready() en $(document) y el .click() en el texto, para que cuando se haga click en el texto, en <p>, funcione el .css(). Obviamente para que el documente lo cargue Jquery, hay que usar la siguiente línea de código:
  47.        
  48.         "$(document).ready(function() { Subfunciones y demás, aquí iría al .css()});"
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement