# jQuery.css(): Manipular elementos de estilo CSS

Com o método jQuery.css(), você pode personalizar **propriedades de estilo CSS** diretamente por JavaScript, sem que tenha de acessar o DOM ou inserir seletores CSS em detalhes. Além de ser simplificado, esse método, capaz de alterar o design de um site, é bem mais rápido e preciso.

## O que é jQuery.css()?

O método jQuery.css() permite recuperar ou alterar o **valor de uma propriedade CSS específica**, de um ou mais elementos selecionados. A função também pode ser usada em combinação com outros métodos, como com jQuery.on() para manejar eventos e com [jQuery.animate()](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-animate/) para criar animações. Para manipular as propriedades de vários elementos do mesmo tipo, você também pode usar o jQuery.css() juntamente com o jQuery.each(). Além disso, se você trabalha com [jQuery no WordPress](https://www.ionos.com/pt-br/digitalguide/hospedagem/blogs/wordpress-jquery/ "WordPress e jQuery"), pode integrar perfeitamente o jQuery.css() no CMS para não depender de outros meios.

Dica O [*webspace*](https://www.ionos.com/hosting/webspace "Webspace: Get your project online — IONOS") da IONOS oferece soluções escaláveis, permitindo que você contrate os recursos que precisa para a sua aplicação. A infraestrutura estável do espaço web da IONOS garantirá que o seu site esteja sempre on-line e disponível aos visitantes. Além disso, você poderá expandir o seu pacote de hospedagem sempre que necessitar, para acompanhar o crescimento do seu negócio.

## Sintaxe do método jQuery.css()

A sintaxe do jQuery.css() tem esta estrutura básica:

```jQuery
$(selector).css(property, value);
```

O parâmetro ***property** *indica a propriedade CSS cujo valor será recuperado, enquanto* **value*** indica o novo valor, em formato numérico ou como cadeia de caracteres.

Também é possível registrar ou manipular várias propriedades CSS ao mesmo tempo, desde que você especifique um objeto com **pares de propriedade e valor**, como mostra o exemplo abaixo:

```jQuery
$(selector).css({property1: value1, property2: value2, ...});
```

No tutorial de jQuery para iniciantes do nosso Digital Guide, você encontrará tudo o que precisa para aprimorar seus conhecimentos básicos de jQuery.

Dica A [API da IONOS](https://developer.hosting.ionos.com "IONOS Developer API") é uma poderosa ferramenta de automação de tarefas e processos. Com ela, você pode administrar seus serviços da IONOS, bem como criar e configurar recursos, sem a necessidade de intervenções manuais. Com a API da IONOS, você poupa seu tempo e reduz a probabilidade de erros humanos.

## Exemplo de uso do jQuery.css()

Observe, neste exemplo, o método jQuery.css() aplicado a um código:

```jQuery

<html>
<head>
    <title>jQuery.css() example</title>
    <style>
        .myElement {
            width: 200px;
            height: 100px;
            background-color: blue;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="myElement">This is an example text</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".myElement").css("background-color", "red");
            $(".myElement").css("color", "green");
            var fontSize = $(".myElement").css("font-size");
            console.log("Font-Size:", fontSize);
        });
    </script>
</body>
</html>
```

Acima, encontramos um elemento HTML com a classe `myElement`, originalmente de fundo azul, texto branco e fonte de 20 pixels. Graças ao jQuery.css(), alteramos a cor de fundo do elemento para vermelho (`$(".myElement").css("background-color", "red");`) e a cor da fonte para verde (`$(".myElement").css("color", "green");`). Além disso, utilizamos o método `$(".myElement").css("font-size")` para recuperar o tamanho atual da fonte do elemento e exibi-lo no console.

Seguindo esse mesmo esquema, você pode manipular diversas propriedades de estilo CSS, alterando dinamicamente a aparência do seu site.

Dica Com o [Deploy Now](https://www.ionos.com/hosting/deploy-now "Deploy Now – IONOS") da IONOS, você terá, à sua disposição, uma interface intuitiva para o deployment automático de sites estáticos e aplicações de página única. O rápido processo de instalação permitirá que você implante sua aplicação com toda praticidade, sem precisar lidar com configurações trabalhosas e complexas.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-css/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/jquery-css/) for AI/LLM consumption.