Como mudar propriedades CSS com JQuery

Veja como mudar propriedades CSS com JQuery de uma forma simples e fácil, esta dica vai ajudar você a montar seu layout de modo dinâmico e interativo.

[ad#texto]

É comum surgir a necessidade de manipularmos CSS em tempo de execução e a melhor forma de realizar esta tarefa é utilizando JQuery.

Como mudar propriedades CSS com JQuery
Como mudar propriedades CSS com JQuery

Veja como mudar propriedades CSS com JQuery de forma muito simplificada:

HTML:

<div>
 <p>Exemplo de parágrafo!!!</p>
</div>

Agora vamos adicionar um fundo cinza em tempo de execução:

$("div").css("background", "#ccc");

Agora vamos explicar como mudar propriedades CSS com JQuery, o primeiro trecho é puro HTML, ele é que será manipulado e o segundo trecho é um pequeno código-fonte JQuery que vai efetivamente alterar a renderização através do .css() do JQuery.

No $() você vai selecionar o elemento pelo TAGNAME, pela classe ou pelo ID do elemento e o .css() é adicionado a propriedade CSS que será manipulada e em seguida o seu valor.

Porém é preciso tomar um cuidado, embora várias propriedades CSS sejam iguais em um arquivo CSS “puro” e no JQuery alguma delas terão pequenas diferenças de escrita, veja uma tabela de conversão:

Propriedade – CSSReferência – JavaScript
backgroundbackground
background-attachmentbackgroundAttachment
background-colorbackgroundColor
background-imagebackgroundImage
background-positionbackgroundPosition
background-repeatbackgroundRepeat
borderborder
border-bottomborderBottom
border-bottom-colorborderBottomColor
border-bottom-styleborderBottomStyle
border-bottom-widthborderBottomWidth
border-colorborderColor
border-leftborderLeft
border-left-colorborderLeftColor
border-left-styleborderLeftStyle
border-left-widthborderLeftWidth
border-rightborderRight
border-right-colorborderRightColor
border-right-styleborderRightStyle
border-right-widthborderRightWidth
border-styleborderStyle
border-topborderTop
border-top-colorborderTopColor
border-top-styleborderTopStyle
border-top-widthborderTopWidth
border-widthborderWidth
clearclear
clipclip
colorcolor
cursorcursor
displaydisplay
filterfilter
fontfont
font-familyfontFamily
font-sizefontSize
font-variantfontVariant
font-weightfontWeight
heightheight
leftleft
letter-spacingletterSpacing
line-heightlineHeight
list-stylelistStyle
list-style-imagelistStyleImage
list-style-positionlistStylePosition
list-style-typelistStyleType
marginmargin
margin-bottommarginBottom
margin-leftmarginLeft
margin-rightmarginRight
margin-topmarginTop
overflowoverflow
paddingpadding
padding-bottompaddingBottom
padding-leftpaddingLeft
padding-rightpaddingRight
padding-toppaddingTop
page-break-afterpageBreakAfter
page-break-beforepageBreakBefore
positionposition
floatstyleFloat
text-aligntextAlign
text-decorationtextDecoration
text-decoration: blinktextDecorationBlink
text-decoration: line-throughtextDecorationLineThrough
text-decoration: nonetextDecorationNone
text-decoration: overlinetextDecorationOverline
text-decoration: underlinetextDecorationUnderline
text-indenttextIndent
text-transformtextTransform
toptop
vertical-alignverticalAlign
visibilityvisibility
widthwidth
z-indexzIndex

 

Feito, agora você já sabe como mudar propriedades CSS com JQuery em tempo de execução.

Petter Rafael
Petter Rafael

Desenvolvedor Web atua com as tecnologias Java e PHP apoiadas pelos bancos de dados Oracle e MySQL. Além dos ambientes de desenvolvimento acima possuiu amplo conhecimento em servidores Apache/Tomcat, Photoshop, Arte & Foto, Flash e mais uma dezena de ferramentas e tecnologias emergentes. Atualmente colabora com o Viablog escrevendo sobre programação e tecnologia.

Assinar blog por e-mail

Digite seu endereço de e-mail para assinar este blog e receber notificações de novas publicações por e-mail.

Junte-se a 320 outros assinantes

Busca

novembro 2020
DSTQQSS
1234567
891011121314
15161718192021
22232425262728
2930 

Categorias