Neste tutorial vamos estudar como modificar o css dos nossos elementos html, aprenderemos como modificar uma ou mais proriedades, remover e adicionar classes.
Para você que não conhece o JQuery, clique aqui e leia o tutorial de introdução.
Com o nosso querido JQuery, podemos manipular por completo os estilos dos nosso elementos com uma facilidade enorme, utilizando de forma criativa, podemos fazer coisas incriveis, apenas com algumas linhas de código.
VEJA AQUI O RESULTADO FINAL DESTE TUTORIAL
Vamos ao que interessa, ao tutorial, clique no leia mais para ler o post por completo.
Tutorial:
Como vocês já sabem estruturar um arquivo html para receber o código em JQuery, não vou entrar em detalhes nestes passos (para ver como isso funciona clique aqui).
Vamos a mágica,
<html> <head> <title>.:: thecodebr.blogspot.com - Tutorial JQuery - Manipulando CSS</title> <script src="jquery-1.4.2.min.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function () { //Adiciona evento click ao item cor texto $("#cor").click(function () { //Adiciona evento click ao item tamanho do texto $("#conteudo").css("color", "#66FF00"); }); //Variavel setando valor incial do tamanho do texto var sTamanhoTexto = 10; //Adiciona evento click ao item tamanho do texto $("#tamanho").click(function () { //Seta variavel com o valor dela mesma + 1 sTamanhoTexto = sTamanhoTexto + 1; //Modifica o css do texto, .css("PROPRIEDADE", " VALOR") $("#conteudo").css("font-size", sTamanhoTexto + "px"); }); //Adiciona evento click ao item corfundo $("#fundo").click(function () { //Modifica o css do body, .css("PROPRIEDADE", " VALOR") $("body").css("background-color", "#FF6600"); }); //Adiciona evento click ao remove classe $("#remove").click(function () { //Remove classe $("#conteudo").removeClass("texto"); }); //Adiciona evento click ao adiciona classe $("#add").click(function () { //adiciona classe $("#conteudo").addClass("texto"); }); }); </script> <style type="text/css"> body { background-color: #003366; color: #FFFFFF; font-family: Verdana; font-size: 10px; } #controles span { cursor: pointer; } #controles { width: 500px; margin-top: 20px; text-align:left; background-color: #0B152B; padding-left: 20px; padding-top: 20px; padding-bottom: 15px; } .texto { font-family: Verdana; font-weight: bold; color: #FFFFFF; line-height: 200%; margin-top: 30px; width: 500px; text-align: justify; } </style> </head> <body> <center> <h1>Lorem Ipsum is simply dummy</h1> <div id="conteudo" class="texto"> Text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. text of the printing and typesetting industry. <br /> <br /> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <div id="controles"> <h3>Controles:<br /> <br /> </h3> <span id="cor">- Cor Texto</span> <br /><br /> <span id="tamanho">- Tamanho Texto</span> <br /><br /> <span id="fundo">- Cor Fundo</span> <br /><br /> <span id="remove">- Remover Classe do texto</span><span id="add"> - Adicionar Classe ao texto</span> </div> </center> </body> </html>
Não vou comentar aqui no texto linha por linha, pois o que nos interessa já está comentado no código.
Viu como é facil ? Prático não ?
Até a próxima, abraços á todos, qualquer duvida comentem.
Nenhum comentário:
Postar um comentário