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() 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, pode integrar perfeitamente o jQuery.css() no CMS para não depender de outros meios.

Dica

O webspace 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:

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

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:

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

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 é 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:

<!DOCTYPE html>
<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>
jQuery

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 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.

Este artigo foi útil?
Para melhorar a sua experiência, este site usa cookies. Ao acessar o nosso site, você concorda com nosso uso de cookies. Mais informações