Como estilizar elementos html em jQuery

Propriedades de estilo para elementos HTML selecionados são atribuídos ou devolvidos usando o jQuery CSS () método. Quando é utilizado como uma função getter, ele retorna o valor da propriedade do primeiro elemento HTML correspondente. Você também pode usá -lo para definir propriedades CSS únicas ou múltiplas de todos os elementos correspondentes.

Este artigo discutirá o procedimento para Estilo elementos HTML em jQuery. Também demonstraremos alguns exemplos apropriados relacionados ao método css (). Então vamos começar!

Como obter a propriedade CSS dos elementos HTML em jQuery

No jQuery, você pode obter a propriedade CSS especificada dos elementos HTML, passando o “nome da propriedade”Como argumento no método css (). Para fazer isso, você deve seguir a sintaxe abaixo:

$ (seletor).CSS ("PropertyName");

Você pode adicionar um jQuery “Seletor”Para selecionar os elementos HTML, e o método CSS () é utilizado para recuperar os valores da propriedade passada.

Exemplo: obtendo a propriedade CSS dos elementos HTML em jQuery
Na nossa "índice.html”, Adicionamos um botão e três elementos de parágrafos e definimos seus“cor de fundoValor da propriedade CSS:

Este é o 1º parágrafo.

Este é o segundo parágrafo.

Este é o terceiro parágrafo.

Verifique o fundo

Em seguida, em nosso arquivo JavaScript, que é nomeado como “meu projeto.JS”, Escreveremos o seguinte código:

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

Quando o usuário clica no “Verifique o fundo”Botão, o jQuery procurará o“p"Ou parágrafos e obtenha o"cor de fundo”Propriedade CSS do primeiro elemento correspondente. No final, uma caixa de alerta será mostrada no navegador compreendendo o valor da propriedade de “cor de fundo”:

Depois de adicionar o código em nosso “índice.html”, Vamos executá -lo usando o“Servidor fígadoExtensão de código vs:

Clicando no “Verifique o fundo”O botão informará sobre a propriedade CSS em segundo plano do primeiro parágrafo em uma caixa de alerta:

Como definir a propriedade CSS dos elementos HTML em jQuery

O método jQuery css () também permite definir as propriedades CSS dos elementos HTML. Se você deseja alterar os valores da propriedade de um elemento HTML, passe o “nome da propriedade" e "valor”Como argumentos ao método css (). Ambos os argumentos devem ser separados por vírgula:

$ (seletor).CSS ("PropertyName", "Value");

Exemplo: Definindo a propriedade CSS de elementos HTML no jQuery
Neste exemplo, vamos definir o “cor de fundoPropriedade CSS de todos os elementos do parágrafo:

Este é um título

Este é o 1º parágrafo.

Este é o segundo parágrafo.

Este é o terceiro parágrafo.

Este é um parágrafo.

Defina cor de fundo de P

Quando o usuário clicar no botão fornecido, ele definirá a cor de fundo de cada elemento de parágrafo como “amarelo”:

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

Você pode ver na saída abaixo do ritmo que o “cor de fundo”O valor da propriedade CSS dos elementos do parágrafo agora é alterado para“amarelo”:

Como definir várias propriedades CSS dos elementos HTML em jQuery

Para definir várias propriedades CSS dos elementos HTML com o método CSS (), você deve seguir a sintaxe abaixo:

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

Aqui, você precisa escrever as propriedades e seus valores em um formato de objeto de valor chave, separado por vírgulas.

Exemplo: Definindo várias propriedades CSS dos elementos HTML no jQuery
Neste exemplo, mudaremos o “cor de fundo" e "tamanho da fonte”Para todos os elementos de parágrafo adicionais:

Este é um título

Este é o 1º parágrafo.

Este é o segundo parágrafo.

Este é o terceiro parágrafo.

Este é um parágrafo.

Defina várias propriedades CSS

Sobre "botão”Clique em Evento, JQuery selecionará o elemento parágrafos e define sua cor de plano de fundo para“amarelo”E o tamanho da fonte para“150%”:

$ (documento).pronto (function ()
$ ("botão").clique (function ()
$ ("p").CSS ("Background-Color": "Yellow", "Font-Size": "150%");
);
);

A saída acima mencionada significa que definimos com sucesso as várias propriedades CSS especificadas dos elementos HTML selecionados.

Conclusão

O método jQuery css () é utilizado para modelar ou alterar as propriedades CSS dos elementos HTML selecionados. Pode ser usado de várias maneiras, desde obter o valor da propriedade CSS até a definição de propriedades HTML simples e múltiplas. Este artigo discutiu o procedimento para estilizar elementos html no jQuery, e também demonstramos alguns exemplos apropriados relacionados ao método css ().