Como todos sabemos que podemos executar muitas tarefas divertidas usando o jQuery devido à sua agenda leve e "escreva menos, faça mais". Uma dessas tarefas é renderizar mudanças nas propriedades do estilo CSS dos elementos HTML. Você pode alterar o CSS usando o CSS () Método de jQuery.

Aqui neste guia, explicamos esse método em detalhes, além disso, demonstramos exemplos diferentes que ajudam a entender melhor o método e seu uso.

Método CSS ()

O método css () no jQuery é usado para fins de buscar ou aplicar uma ou mais propriedades de estilo em um elemento html.

Sintaxe

Para aplicar uma propriedade CSS.

CSS ("Propriedade", "Valor");

Para buscar uma propriedade CSS.

CSS ("Propriedade");

Para aplicar várias propriedades CSS.

CSS ("Property": "Value", "Property": "Value"…);

Para entender melhor o método CSS (), vamos explorar alguns exemplos.

Exemplo 1: Como definir uma propriedade CSS

Suponha que você queira definir a cor de fundo de um

elemento usando o método css () no jQuery.

Html

Definindo uma propriedade CSS

Defina a cor de fundo de H1

No código HTML acima, criamos um

, e um elemento.

jQuery

$ (documento).pronto (function ()
$ (".botão").clique (function ()
$ ("H1").css ("cor de fundo", "amarelo");
);
);

No código jQuery acima, aplicamos uma cor amarela de fundo

elemento usando o método css ().

Saída

Antes de clicar no botão.

Depois de clicar no botão.

A cor de fundo do cabeçalho foi definida com sucesso.

Como buscar uma propriedade CSS

Suponha que você queira buscar qualquer propriedade CSS de um elemento, por exemplo, cor de fundo de um elemento div. Siga o código abaixo.

Html

Olá Mundo

Retornar a cor de fundo da div

Aqui criamos um e um elemento.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
alerta ("cor de fundo =" + $ ("div").css ("cor de fundo"));
);
);

No código acima, o método css () é usado apenas para extrair a cor de fundo atribuída ao elemento. Além disso, foi criada uma mensagem de alerta que exibirá a cor de fundo da div.

Saída

A cor de fundo do elemento div foi buscada e exibida com sucesso.

Como definir várias propriedades CSS

Suponha que você queira atribuir várias propriedades de estilo a qualquer elemento html de uma só vez. Siga o exemplo abaixo.

Html

Algum parágrafo.

Defina vários estilos

No código acima, criamos um

elemento junto com um elemento.

jQuery

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("p").CSS ("Background-Color": "Yellow", "Padding": "25px", "Width": "200px");
);
);

Usando o método jQuery css (), aplicamos uma cor de fundo

elemento e atribuiu algum preenchimento e largura.

Saída

Ele pode ser verificado na saída acima que vários estilos são aplicados ao parágrafo de uma só vez.

Conclusão

Você pode alterar o CSS usando o método jQuery css () que é usado com o objetivo de obter ou definir propriedades de estilo de um elemento. Usando este método, você pode aplicar vários estilos a um HTML de uma só vez, manipulando as propriedades do estilo CSS. Este tutorial o orienta sobre como alterar o CSS de várias maneiras através do método jQuery CSS (), juntamente com os exemplos relevantes para uma melhor compreensão.