Manipulando CSS com jQuery « Danilo

Manipulando CSS com jQuery

Com jQuery podemos adicionar e alterar atributos CSS, podemos manipular todo o CSS de uma página facilmente com a função css do jQuery. Vou mostrar detalhadamente abaixo como adicionar e alterar esses atributos.

HTML:

Supomos que você tenha na sua página o seguinte conteúdo HTML:

<html>
    <head>
        <title>Manipulando css</title>
    </head>
    <body>
        <h1>Manipulando CSS</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis lorem ac ante pretium ultrices. Maecenas vel tellus lacus. Sed nec ultrices magna. Pellentesque nulla tortor, malesuada vitae viverra id, imperdiet vitae elit. Donec malesuada, dolor sit amet rutrum eleifend, ante arcu tempor dolor, vitae vulputate odio elit id metus. Fusce odio nulla, facilisis vel consectetur ut, rutrum ut diam. Nam vel blandit urna. In malesuada iaculis nulla, nec interdum nisi iaculis at. Curabitur lacinia consectetur porta. Nunc sit amet nibh eu orci venenatis adipiscing at quis leo. Donec in ante tortor. Vivamus varius tellus id lorem scelerisque placerat. Nunc semper, ligula vel tincidunt aliquet, diam diam malesuada diam, quis tristique ligula purus ac eros. Sed fringilla tellus ac lorem pellentesque vitae viverra risus dapibus. Fusce consequat felis orci. Pellentesque rutrum, tellus eget auctor vehicula, eros nibh condimentum turpis, vitae luctus magna erat a augue.</p>
    </body>
</html>

jQuery em Ação:

Primeiramente vamos baixar a biblioteca jQuery: Aqui e adicionar ela ao head do nosso código: :)

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

Vamos adicionar os atributos CSS à página com jQuery, no exemplo abaixo coloquei um background amarelo no body, joguei um vermelho no h1 e deixei a tag p justificado, com fonte 13px e a cor cinza. Vejamos:

$(document).ready( function() {
    $('body').css("background", "#FFFEEB");
    $('h1').css("color", "#EB191E");
    $('p').css({"font-size":"13px", "line-height":"14px", "color":"#6E6E6E", "text-align":"justify"});
});

Feito isso, Pronto! Poderemos visualizar a pagina como o CSS adicionado via jQuery.

Baixar código inteiro: Aqui

Até o próximo post…

CSS, html, javascript, jQuery

Postado na quarta-feira, 28 de outubro de 2009, 09:37

#1 por Chris Benseler - 28 de outubro de 2009 em 15:43

Vale complementar, Danilo, falando que as chaves não precisam estar entre aspas.
Pode ser assim:
$(’p').css({fontSize:”13px”, color:”#6E6E6E”});

Dessa forma, o código é ligeiramente mais performático (nada que vá dar um ganho absurdo, claro).

[]s!

Citar
#2 por Mackeran - 28 de outubro de 2009 em 21:23

I liked it. So much useful material. I read with great interest.

Citar