{"id":10430,"date":"2023-08-06T09:50:44","date_gmt":"2023-08-06T12:50:44","guid":{"rendered":"https:\/\/www.homehost.com.br\/blog\/?p=10430"},"modified":"2024-05-02T11:03:34","modified_gmt":"2024-05-02T14:03:34","slug":"mudar-background-javascript","status":"publish","type":"post","link":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/","title":{"rendered":"Como mudar background em JavaScript"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Neste artigo, exploraremos como mudar o background JavaScript. O processo envolve a manipula\u00e7\u00e3o da propriedade de <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/estilos-html\/\">estilo<\/a> do elemento HTML que representa o corpo da p\u00e1gina, ou de outros elementos espec\u00edficos.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Com o uso da propriedade <strong><code>`style`<\/code><\/strong> do objeto <a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/o-que-e-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a>, podemos definir a cor do background de forma din\u00e2mica e interativa.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m disso, veremos como criar efeitos visuais mais interessantes atrav\u00e9s da aplica\u00e7\u00e3o de gradientes de cores. Utilizando m\u00e9todos como <strong><code>`linear-gradient()` e `radial-gradient()`<\/code><\/strong>, podemos combinar diferentes cores para criar transi\u00e7\u00f5es suaves e anima\u00e7\u00f5es atrativas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Acompanhe o texto abaixo para aprender como realizar essas modifica\u00e7\u00f5es e tornar suas p\u00e1ginas web mais envolventes e visualmente agrad\u00e1veis.<\/p>\n\n\n\n<p class=\"has-background wp-block-paragraph\" style=\"background-color:#ff6a0038\">Outros t\u00edtulos interessantes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/switch-javascript\/\">Switch JavaScript: O que \u00e9 e como usar?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/tipos-de-funcoes-javascript\/\">Quais s\u00e3o os tipos de fun\u00e7\u00f5es JavaScript?<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/alert-javascript\/\">Alert JavaScript: Como exibir uma mensagem na tela<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/map-javascript\/\">Map JavaScript: Potencializando a Efici\u00eancia com o Uso Desse M\u00e9todo<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/reduce-javascript\/\">Reduce JavaScript: Desvendando a usabilidade e pr\u00e1tica<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/\">Como mudar background em&nbsp;JavaScript<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/print-div-javascript\/\">Print Div JavaScript: como usar e quais as funcionalidades<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/foreach-javascript\/\">forEach JavaScript: exemplos pr\u00e1ticos<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/entendendo-e-utilizando-a-tag-span-em-html\/\">Entendendo e Utilizando a Tag span em HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/select-html\/\">Select em HTML: crie menus em um formul\u00e1rio HTML<\/a><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><div id=\"ez-toc-container\" class=\"ez-toc-v2_0_72 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Conte\u00fado<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Como_mudar_o_background_JavaScript\" title=\"Como mudar o background JavaScript?\">Como mudar o background JavaScript?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Sintaxe_do_codigo\" title=\"Sintaxe do c\u00f3digo\">Sintaxe do c\u00f3digo<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Usando_o_metodo_stylebackgroundColor\" title=\"Usando o m\u00e9todo .style.backgroundColor\">Usando o m\u00e9todo .style.backgroundColor<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Usando_JQuery\" title=\"Usando JQuery\">Usando JQuery<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Possiveis_erros_ao_mudar_o_background_JavaScript\" title=\"Poss\u00edveis erros ao mudar o background JavaScript\">Poss\u00edveis erros ao mudar o background JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Selecao_inadequada_de_elementos\" title=\"Sele\u00e7\u00e3o inadequada de elementos\">Sele\u00e7\u00e3o inadequada de elementos<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Classes_de_CSS_conflitantes\" title=\"Classes de CSS conflitantes\">Classes de CSS conflitantes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Erros_de_digitacao\" title=\"Erros de digita\u00e7\u00e3o\">Erros de digita\u00e7\u00e3o<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Evento_de_clique_duplicado\" title=\"Evento de clique duplicado\">Evento de clique duplicado<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Desempenho_e_velocidade\" title=\"Desempenho e velocidade\">Desempenho e velocidade<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Compatibilidade_entre_navegadores\" title=\"Compatibilidade entre navegadores\">Compatibilidade entre navegadores<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Acessibilidade\" title=\"Acessibilidade\">Acessibilidade<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Alternativas_de_como_mudar_o_background_JavaScript\" title=\"Alternativas de como mudar o background JavaScript\">Alternativas de como mudar o background JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Usando_CSS_custom_properties_variaveis_CSS\" title=\"Usando CSS custom properties (vari\u00e1veis CSS)\">Usando CSS custom properties (vari\u00e1veis CSS)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Utilizando_classes_CSS_adicionais\" title=\"Utilizando classes CSS adicionais\">Utilizando classes CSS adicionais<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Manipulacao_de_gradientes_de_fundo_com_JavaScript\" title=\"Manipula\u00e7\u00e3o de gradientes de fundo com JavaScript\">Manipula\u00e7\u00e3o de gradientes de fundo com JavaScript<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Gradientes_Lineares\" title=\"Gradientes Lineares\">Gradientes Lineares<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Gradientes_Radiais\" title=\"Gradientes Radiais\">Gradientes Radiais<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Alterando_Gradientes_Dinamicamente\" title=\"Alterando Gradientes Dinamicamente\">Alterando Gradientes Dinamicamente<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#Conclusao\" title=\"Conclus\u00e3o\">Conclus\u00e3o<\/a><\/li><\/ul><\/nav><\/div>\n<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Como_mudar_o_background_JavaScript\"><\/span>Como mudar o background JavaScript?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para mudar o background (ou fundo) de uma p\u00e1gina web usando JavaScript, <strong>voc\u00ea pode fazer isso alterando a propriedade de estilo do elemento <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/html-basico\/\" target=\"_blank\" rel=\"noreferrer noopener\">HTML b\u00e1sico<\/a> que representa o corpo da p\u00e1gina<\/strong> (ou qualquer outro elemento que voc\u00ea deseja mudar o background). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa maneira, voc\u00ea pode fazer isso usando a propriedade <strong>`style`<\/strong> do objeto do elemento HTML e definindo o valor da propriedade <strong>`background`<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui est\u00e1 um exemplo de como voc\u00ea pode fazer isso:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">HTML:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;Mudar Background com JavaScript&lt;\/title&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&lt;h1&gt;Exemplo de Mudan\u00e7a de Background&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;button onclick=\"mudarBackground()\"&gt;Mudar Background&lt;\/button&gt;\n\n&nbsp;&nbsp;&lt;script src=\"seu_script.js\"&gt;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript (seu_script.js):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function mudarBackground() {\n\n&nbsp;&nbsp;\/\/ Obtendo o elemento do corpo da p\u00e1gina\n\n&nbsp;&nbsp;var body = document.body;\n\n&nbsp;&nbsp;\/\/ Definindo o novo background\n\n&nbsp;&nbsp;body.style.background = \"lightblue\"; \/\/ Voc\u00ea pode usar qualquer cor v\u00e1lida aqui, como \"blue\", \"#FF0000\", \"rgba(0, 255, 0, 0.5)\", etc.\n\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Assim, neste exemplo, o bot\u00e3o &#8220;Mudar Background&#8221; chama a fun\u00e7\u00e3o <code>`mudarBackground()`<\/code> quando \u00e9 clicado.<\/strong> Essa fun\u00e7\u00e3o seleciona o elemento do corpo da p\u00e1gina usando <strong><code>`document.body`<\/code><\/strong> e, em seguida, define a propriedade <code><strong>`background`<\/strong> <\/code>do estilo para a cor <strong>&#8220;lightblue&#8221;<\/strong> (azul claro). Voc\u00ea pode alterar essa cor para qualquer outra cor que desejar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Lembre-se, no entanto, que o c\u00f3digo JavaScript deve estar em um arquivo separado ou entre as <a href=\"https:\/\/www.homehost.com.br\/blog\/criar-sites\/tags-html\/\" target=\"_blank\" rel=\"noreferrer noopener\">tags<\/a> <strong><code>`&lt;script&gt;`<\/code><\/strong> dentro da p\u00e1gina HTML para que funcione corretamente. Certifique-se de que o arquivo JavaScript esteja inclu\u00eddo corretamente na p\u00e1gina.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Sintaxe_do_codigo\"><\/span>Sintaxe do c\u00f3digo<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Usando_o_metodo_stylebackgroundColor\"><\/span>Usando o m\u00e9todo <code>.style.backgroundColor<\/code><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>O m\u00e9todo <code>.style.backgroundColor<\/code> \u00e9 usado em JavaScript para alterar o background (fundo) de um elemento HTML atrav\u00e9s da propriedade CSS <code>\"background-color\"<\/code>. <\/strong>Este m\u00e9todo permite que voc\u00ea modifique a cor de fundo de um elemento diretamente no c\u00f3digo, sem precisar editar o arquivo CSS separadamente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqui est\u00e1 como voc\u00ea pode us\u00e1-lo:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Selecione o elemento HTML desejado:<\/strong> Comece selecionando o elemento HTML que voc\u00ea deseja alterar o background. Isso pode ser feito usando m\u00e9todos como <strong><code>document.getElementById(), document.querySelector()<\/code><\/strong> ou outros seletores do DOM.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;\/* Estilo inicial da div *\/\n\n&nbsp;&nbsp;&nbsp;&nbsp;.meuDiv {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: 200px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: 200px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: blue;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/style&gt;\n\n&lt;div class=\"meuDiv\" id=\"minhaDiv\"&gt;&lt;\/div&gt;\n\n\/\/Esse exemplo cria uma caixa que servir\u00e1 para a troca da cor<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Aplique a cor de fundo: <\/strong>Depois de selecionar o elemento, utilize o m\u00e9todo <strong>.style.backgroundColor para definir a nova cor de fundo.<\/strong> A cor pode ser especificada de v\u00e1rias formas, como nomes de cores (por exemplo, &#8220;red&#8221;, &#8220;blue&#8221;, &#8220;green&#8221;) ou em formato hexadecimal (por exemplo, &#8220;#FF0000&#8221; para vermelho).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const minhaDiv = document.getElementById(\"minhaDiv\");\n\n&nbsp;&nbsp;&nbsp;&nbsp;minhaDiv.style.backgroundColor = \"#FF0000\";<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Transi\u00e7\u00e3o suave:<\/strong> Se voc\u00ea deseja aplicar uma transi\u00e7\u00e3o suave ao alterar a cor de fundo, pode utilizar a propriedade <strong><code>CSS \"transition\"<\/code><\/strong>. Isso far\u00e1 com que a mudan\u00e7a de cor ocorra gradualmente, em vez de ser instant\u00e2nea.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Antes do exemplo com transi\u00e7\u00e3o suave, vamos criar o bot\u00e3o:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;button onclick=\"mudarCorDeFundo()\"&gt;Mudar Cor de Fundo&lt;\/button&gt;\n\n&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;function mudarCorDeFundo() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Verifica a cor atual da div e alterna entre azul e vermelho\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (minhaDiv.style.backgroundColor === \"blue\") {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minhaDiv.style.transition = \"background-color 1s\";\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minhaDiv.style.backgroundColor = \"red\";\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minhaDiv.style.transition = \"background-color 1s\";\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minhaDiv.style.backgroundColor = \"blue\";\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Neste exemplo, <strong>n\u00f3s alteramos o background do elemento para vermelho. Usamos uma transi\u00e7\u00e3o de 1 segundo.<\/strong> Essa mudan\u00e7a proporciona uma experi\u00eancia visual mais agrad\u00e1vel para o usu\u00e1rio. Ele se parecer\u00e1 com isso visualmente:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img fetchpriority=\"high\" decoding=\"async\" src=\"https:\/\/lh4.googleusercontent.com\/cwO8UjcRD3MHHr6esgsdrdCelllbT0nXlZMKwIKjXxnUwnhHvvyXBV6ASCzMLix6wkaJ1mwdfF8OzPy04UOc5bfMfqwcqZn5q1cAOtW2gXWr1oO2ZefJu1c8fnWFZ4xNLS5l5CGEPtjA_heiUGQ3qUE\" alt=\"\" width=\"238\" height=\"249\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Resumindo, <strong>o m\u00e9todo <code>.style.backgroundColor<\/code> \u00e9 usado para alterar o background de um elemento HTML,<\/strong> permitindo que voc\u00ea aplique facilmente cores diferentes a elementos espec\u00edficos diretamente pelo JavaScript.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Combinado com a propriedade <strong><code>\"transition\"<\/code><\/strong>, \u00e9 poss\u00edvel criar anima\u00e7\u00f5es suaves e visualmente agrad\u00e1veis ao modificar a cor de fundo de um elemento na p\u00e1gina web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Usando_JQuery\"><\/span>Usando JQuery<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Para mudar o background usando jQuery, voc\u00ea pode utilizar o m\u00e9todo <code>`.css()`<\/code> para alterar a propriedade CSS <code>`background`<\/code> de um elemento HTML.<\/strong> Esse m\u00e9todo permite que voc\u00ea modifique o estilo do elemento selecionado de forma din\u00e2mica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Antes de passar a um exemplo completo de como fazer isso, \u00e9 preciso importar a lib. Como importar o jQuery usando um CDN:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;Exemplo de Importa\u00e7\u00e3o do jQuery&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;!-- Importe o jQuery usando um CDN --&gt;\n\n&nbsp;&nbsp;&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&lt;!-- Seu conte\u00fado HTML e scripts usando jQuery aqui --&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Neste exemplo, <strong>o jQuery est\u00e1 sendo importado atrav\u00e9s do link https:\/\/code.jquery.com\/jquery-3.6.0.min.js.<\/strong> Voc\u00ea pode substituir 3.6.0 pela vers\u00e3o mais recente dispon\u00edvel no site do jQuery, caso seja diferente.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Continuando ao exemplo:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;Mudar Background com jQuery&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 50px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Arial, sans-serif;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;.change-background {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 20px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: 1px solid #ccc;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor: pointer;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;.blue-background {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #3498db;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;.green-background {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #27ae60;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/style&gt;\n\n&nbsp;&nbsp;&lt;script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"&gt;&lt;\/script&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&lt;h1&gt;Mudar Background com jQuery&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Clique nos bot\u00f5es abaixo para alterar o background:&lt;\/p&gt;\n\n&nbsp;&nbsp;&lt;button class=\"change-background blue-background\"&gt;Azul&lt;\/button&gt;\n\n&nbsp;&nbsp;&lt;button class=\"change-background green-background\"&gt;Verde&lt;\/button&gt;\n\n&nbsp;&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Quando os bot\u00f5es com a classe \"change-background\" s\u00e3o clicados\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(\".change-background\").on(\"click\", function() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Obtemos a classe do bot\u00e3o clicado\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var newClass = $(this).attr(\"class\").split(\" \")&#091;1];\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Removemos todas as classes de background do body\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(\"body\").removeClass();\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\/\/ Adicionamos a nova classe de background ao body\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(\"body\").addClass(newClass);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Neste exemplo, temos duas classes CSS definidas:<strong> <code>`.blue-background` e `.green-background`<\/code>.<\/strong> Quando um dos bot\u00f5es \u00e9 clicado, a classe correspondente ao bot\u00e3o \u00e9 extra\u00edda usando o jQuery e aplicada ao elemento <code><strong>`body`<\/strong><\/code>, mudando assim o background da p\u00e1gina.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Utilizamos a fun\u00e7\u00e3o <code>`.on(\"click\", function() { ... })` <\/code><\/strong>para adicionar um evento de clique aos bot\u00f5es. Dentro desta fun\u00e7\u00e3o, obtemos a classe do bot\u00e3o clicado usando <strong><code>`$(this).attr(\"class\")`<\/code><\/strong> e a separamos para pegar apenas a classe de background usando <strong><code>`split(\" \")[1]`.<\/code><\/strong>&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em seguida,<strong> removemos todas as classes de background do <code>`body`<\/code> com <code>`$(\"body\").removeClass()`,<\/code><\/strong> garantindo que apenas uma classe seja aplicada por vez. Por fim, adicionamos a nova classe de background usando <strong><code>`$(\"body\").addClass(newClass)`.<\/code><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Isso permitir\u00e1 que o usu\u00e1rio alterne entre os backgrounds azul e verde clicando nos bot\u00f5es.<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Possiveis_erros_ao_mudar_o_background_JavaScript\"><\/span>Poss\u00edveis erros ao mudar o background JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ao mudar o background usando JavaScript, podem surgir alguns poss\u00edveis erros e desafios. Descreveremos alguns deles, juntamente com suas solu\u00e7\u00f5es:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Selecao_inadequada_de_elementos\"><\/span>Sele\u00e7\u00e3o inadequada de elementos<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Um erro comum \u00e9 selecionar elementos incorretos no DOM para aplicar as mudan\u00e7as de background.<\/strong> Isso pode levar a resultados inesperados ou at\u00e9 mesmo nenhuma mudan\u00e7a aparente no visual da p\u00e1gina.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para evitar isso, \u00e9 importante certificar-se de selecionar os elementos corretos usando m\u00e9todos como <strong><code>`document.querySelector()` ou `document.getElementById()`.<\/code><\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Classes_de_CSS_conflitantes\"><\/span>Classes de CSS conflitantes<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>As classes CSS com o mesmo nome podem causar conflitos e impedir a correta altera\u00e7\u00e3o do background.<\/strong> Para resolver isso, portanto, \u00e9 importante tornar as classes de background mais espec\u00edficas, evitando conflitos com outras regras CSS j\u00e1 existentes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Erros_de_digitacao\"><\/span>Erros de digita\u00e7\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Erros de digita\u00e7\u00e3o nos nomes das classes ou IDs podem causar problemas na aplica\u00e7\u00e3o do background desejado.<\/strong> Certifique-se de que os nomes das classes estejam escritos corretamente e correspondam exatamente aos definidos no CSS.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Evento_de_clique_duplicado\"><\/span>Evento de clique duplicado<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Se registramos o evento de clique mais de uma vez para o mesmo elemento, o background pode mudar v\u00e1rias vezes ou ficar inconsistente. <\/strong>Para evitar isso, utilize o m\u00e9todo <code>.off()<\/code> para remover quaisquer eventos duplicados antes de adicionar um novo.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Desempenho_e_velocidade\"><\/span>Desempenho e velocidade<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Realizar muitas mudan\u00e7as de background rapidamente pode prejudicar o desempenho da p\u00e1gina, gerando uma experi\u00eancia de usu\u00e1rio ruim.<\/strong> Assim, melhore a performance agrupando as mudan\u00e7as em poucas a\u00e7\u00f5es ou usando anima\u00e7\u00f5es suaves para transi\u00e7\u00f5es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Compatibilidade_entre_navegadores\"><\/span>Compatibilidade entre navegadores<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Alguns navegadores podem interpretar o JavaScript ou CSS de forma diferente,<\/strong> levando a resultados inconsistentes. Teste a aplica\u00e7\u00e3o em diferentes navegadores e vers\u00f5es para garantir a compatibilidade.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Acessibilidade\"><\/span>Acessibilidade<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ao mudar o background, \u00e9 importante considerar a acessibilidade para usu\u00e1rios com defici\u00eancias visuais.<\/strong> Certifique-se de que o texto e outros elementos da p\u00e1gina sejam leg\u00edveis e contrastantes o suficiente para garantir uma experi\u00eancia de usu\u00e1rio inclusiva.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ao enfrentar esses desafios, lembre-se de testar, depurar e iterar sobre o c\u00f3digo para garantir que as mudan\u00e7as de background funcionem conforme o esperado em diferentes cen\u00e1rios.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Al\u00e9m disso, sempre procure seguir as melhores pr\u00e1ticas de programa\u00e7\u00e3o e design para garantir um c\u00f3digo limpo e uma experi\u00eancia do usu\u00e1rio agrad\u00e1vel.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alternativas_de_como_mudar_o_background_JavaScript\"><\/span>Alternativas de como mudar o background JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Usando_CSS_custom_properties_variaveis_CSS\"><\/span>Usando CSS custom properties (vari\u00e1veis CSS)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos definir vari\u00e1veis CSS para armazenar as cores de background e, em seguida, atualiz\u00e1-las conforme necess\u00e1rio. Veja como ficaria:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;Mudar Background com CSS custom properties&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--bg-color: #fff; \/* Valor padr\u00e3o *\/\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: var(--bg-color);\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;.blue-background {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--bg-color: #3498db;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;.green-background {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;--bg-color: #27ae60;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&lt;h1&gt;Mudar Background com CSS custom properties&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Clique nos bot\u00f5es abaixo para alterar o background:&lt;\/p&gt;\n\n&nbsp;&nbsp;&lt;button class=\"blue-background\"&gt;Azul&lt;\/button&gt;\n\n&nbsp;&nbsp;&lt;button class=\"green-background\"&gt;Verde&lt;\/button&gt;\n\n&nbsp;&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;const buttons = document.querySelectorAll('button');\n\n&nbsp;&nbsp;&nbsp;&nbsp;const body = document.querySelector('body');\n\n&nbsp;&nbsp;&nbsp;&nbsp;buttons.forEach(button =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.addEventListener('click', () =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const newClass = button.className.split(' ')&#091;0];\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body.className = newClass;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Utilizando_classes_CSS_adicionais\"><\/span>Utilizando classes CSS adicionais<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos criar classes CSS espec\u00edficas para cada cor de background e adicionar ou remover essas classes conforme necess\u00e1rio. Por exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;Mudar Background com classes CSS adicionais&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 50px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Arial, sans-serif;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;.blue-background {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #3498db;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;.green-background {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #27ae60;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&lt;h1&gt;Mudar Background com classes CSS adicionais&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Clique nos bot\u00f5es abaixo para alterar o background:&lt;\/p&gt;\n\n&nbsp;&nbsp;&lt;button class=\"blue-background\"&gt;Azul&lt;\/button&gt;\n\n&nbsp;&nbsp;&lt;button class=\"green-background\"&gt;Verde&lt;\/button&gt;\n\n&nbsp;&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;const buttons = document.querySelectorAll('button');\n\n&nbsp;&nbsp;&nbsp;&nbsp;const body = document.querySelector('body');\n\n&nbsp;&nbsp;&nbsp;&nbsp;buttons.forEach(button =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;button.addEventListener('click', () =&gt; {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const newClass = button.className.split(' ')&#091;0];\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body.className = newClass;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&nbsp;&nbsp;});\n\n&nbsp;&nbsp;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Essas s\u00e3o apenas algumas das alternativas para mudar o background usando JavaScript.<\/strong> Os desenvolvedores podem escolher cada abordagem de acordo com suas necessidades e prefer\u00eancias, pois cada uma delas tem suas vantagens.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa maneira, \u00e9 importante \u00e9 entender as diferentes possibilidades dispon\u00edveis para realizar essa tarefa de forma eficiente e adequada ao contexto do projeto.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Manipulacao_de_gradientes_de_fundo_com_JavaScript\"><\/span>Manipula\u00e7\u00e3o de gradientes de fundo com JavaScript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Al\u00e9m de simplesmente mudar a cor de fundo, podemos criar efeitos mais interessantes utilizando gradientes de cores.<\/strong> Essa t\u00e9cnica permite misturar duas ou mais cores para criar transi\u00e7\u00f5es suaves e efeitos visuais atrativos.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Nesse t\u00f3pico, exploraremos como criar e manipular gradientes de fundo usando JavaScript e como aplic\u00e1-los a elementos espec\u00edficos da p\u00e1gina para um design mais din\u00e2mico e envolvente. Por exemplo:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Gradientes_Lineares\"><\/span>Gradientes Lineares<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para criar um gradiente linear de fundo, podemos usar o m\u00e9todo <strong><code>`linear-gradient()`<\/code><\/strong> da propriedade <strong><code>`background`<\/code><\/strong>. O seguinte exemplo demonstra como criar um gradiente de duas cores, que se estende horizontalmente:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;Gradiente Linear com JavaScript&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 50px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Arial, sans-serif;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: linear-gradient(to right, #3498db, #27ae60);\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&lt;h1&gt;Gradiente Linear com JavaScript&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Este \u00e9 um exemplo de gradiente linear que se estende horizontalmente.&lt;\/p&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Gradientes_Radiais\"><\/span>Gradientes Radiais<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Podemos criar gradientes radiais usando o m\u00e9todo <strong><code>`radial-gradient()`<\/code><\/strong>. O exemplo a seguir demonstra como criar um gradiente radial com tr\u00eas cores diferentes:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;Gradiente Radial com JavaScript&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 50px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Arial, sans-serif;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: radial-gradient(circle, #3498db, #27ae60, #e74c3c);\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&lt;h1&gt;Gradiente Radial com JavaScript&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Este \u00e9 um exemplo de gradiente radial que combina tr\u00eas cores.&lt;\/p&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alterando_Gradientes_Dinamicamente\"><\/span>Alterando Gradientes Dinamicamente<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Para tornar os gradientes mais din\u00e2micos,<\/strong> podemos utilizar JavaScript para alterar as cores ou os pontos de in\u00edcio e fim do gradiente. No exemplo a seguir, criamos um bot\u00e3o que alterna entre dois gradientes diferentes ao ser clicado:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&lt;head&gt;\n\n&nbsp;&nbsp;&lt;title&gt;Alterando Gradientes com JavaScript&lt;\/title&gt;\n\n&nbsp;&nbsp;&lt;style&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;body {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 50px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-family: Arial, sans-serif;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: linear-gradient(to right, #3498db, #27ae60);\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition: background 0.5s ease;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;.alternate-gradient {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: linear-gradient(to right, #e74c3c, #f39c12);\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;button {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding: 10px 20px;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color: #333;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #fff;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border: none;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;cursor: pointer;\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/style&gt;\n\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&nbsp;&nbsp;&lt;h1&gt;Alterando Gradientes com JavaScript&lt;\/h1&gt;\n\n&nbsp;&nbsp;&lt;p&gt;Clique no bot\u00e3o abaixo para alternar entre dois gradientes diferentes:&lt;\/p&gt;\n\n&nbsp;&nbsp;&lt;button onclick=\"toggleGradient()\"&gt;Alternar Gradiente&lt;\/button&gt;\n\n&nbsp;&nbsp;&lt;script&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;let isAlternate = false;\n\n&nbsp;&nbsp;&nbsp;&nbsp;function toggleGradient() {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const body = document.body;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isAlternate = !isAlternate;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (isAlternate) {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body.classList.add('alternate-gradient');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;body.classList.remove('alternate-gradient');\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&nbsp;&nbsp;}\n\n&nbsp;&nbsp;&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Portanto, com a manipula\u00e7\u00e3o de gradientes de fundo usando JavaScript, podemos adicionar uma dimens\u00e3o criativa e interativa \u00e0s mudan\u00e7as de background em uma p\u00e1gina web.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>A cria\u00e7\u00e3o de gradientes lineares ou radiais permite criar transi\u00e7\u00f5es suaves entre cores e proporcionar uma experi\u00eancia visual agrad\u00e1vel para os usu\u00e1rios.<\/strong> Al\u00e9m disso, ao usar JavaScript para alternar entre gradientes, podemos criar anima\u00e7\u00f5es e efeitos din\u00e2micos, tornando a p\u00e1gina mais envolvente e atraente.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assim, a combina\u00e7\u00e3o de gradientes e interatividade adiciona uma riqueza de possibilidades ao design de interfaces web, permitindo aos desenvolvedores criar experi\u00eancias mais envolventes e agrad\u00e1veis para seus usu\u00e1rios.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusao\"><\/span>Conclus\u00e3o<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Em suma, neste artigo, mostramos como mudar o background usando JavaScript. Aprendemos a manipular a propriedade <code><strong>style<\/strong><\/code> do objeto HTML para definir a cor do background de forma din\u00e2mica.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Criamos efeitos visuais interessantes com gradientes de cores usando os m\u00e9todos <strong><code>linear-gradient()<\/code> e <code>radial-gradient()<\/code>.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dessa forma, com o m\u00e9todo <code><strong>.style.backgroundColor<\/strong><\/code>, alteramos diretamente a cor de fundo de um elemento no c\u00f3digo, proporcionando flexibilidade e facilidade na personaliza\u00e7\u00e3o das p\u00e1ginas web. As transi\u00e7\u00f5es suaves tornaram as mudan\u00e7as de cor mais agrad\u00e1veis aos olhos do usu\u00e1rio.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Exploramos alternativas, como o uso de CSS custom properties e classes CSS adicionais para mudar o background, cada uma com suas vantagens e aplica\u00e7\u00f5es espec\u00edficas.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para garantir uma experi\u00eancia positiva para todos os usu\u00e1rios, \u00e9 importante considerar a compatibilidade entre navegadores e a acessibilidade. Sempre que surgirem poss\u00edveis erros, \u00e9 necess\u00e1rio testar, portanto, depurar e iterar o c\u00f3digo para obter resultados consistentes e satisfat\u00f3rios.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Em conclus\u00e3o, combinando cores e interatividade adequadamente, podemos criar p\u00e1ginas web mais envolventes, atraentes e visualmente agrad\u00e1veis para os usu\u00e1rios.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c9 importante lembrar, tamb\u00e9m, que esses recursos s\u00e3o \u00fateis na <a href=\"https:\/\/www.homehost.com.br\/blog\/seo\/seo-marketing-20-dicas-subir-no-google\/\" target=\"_blank\" rel=\"noreferrer noopener\">otimiza\u00e7\u00e3o SEO<\/a> e ranqueamento do site. N\u00e3o deixe de aprender mais para otimizar o seu site. Por exemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/converter-de-elementor-para-editor-de-blocos-no-wordpress\/\">Como converter Blocos do Elementor para&nbsp;WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/como-descobrir-o-tema-wordpress-de-um-site\/\">Como Descobrir o Tema&nbsp;WordPress&nbsp;de um Site Usando HTML<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/botao-do-whatsapp-no-wordpress\/\">Como criar um bot\u00e3o do WhatsApp na hospedagem&nbsp;WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/wordpress\/como-excluir-um-tema-no-wordpress\/\">Como Excluir um Tema no&nbsp;WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.homehost.com.br\/blog\/tutoriais\/melhorar-a-performance-do-wordpress-gtmetrix\/\">Como melhorar a performance do seu site\u00a0WordPress\u00a0no GTMetrix<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Neste artigo, exploraremos como mudar o background JavaScript. O processo envolve a manipula\u00e7\u00e3o da propriedade de estilo do elemento HTML que representa o corpo da p\u00e1gina, ou de outros elementos espec\u00edficos.&nbsp; Com o uso da propriedade `style` do objeto HTML, podemos definir a cor do background de forma din\u00e2mica e interativa. Al\u00e9m disso, veremos como [&hellip;]<\/p>\n","protected":false},"author":31,"featured_media":10432,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_helpful_status":1,"_lmt_disableupdate":"","_lmt_disable":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[6585],"tags":[],"class_list":["post-10430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como mudar background em JavaScript | Homehost<\/title>\n<meta name=\"description\" content=\"Aprenda nesse artigo como mudar background javascript, criar gradientes e transi\u00e7\u00f5es suaves para melhorar os elementos da sua p\u00e1gina.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como mudar background em JavaScript | Homehost\" \/>\n<meta property=\"og:description\" content=\"Aprenda nesse artigo como mudar background javascript, criar gradientes e transi\u00e7\u00f5es suaves para melhorar os elementos da sua p\u00e1gina.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Homehost\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Homehost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-08-06T12:50:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-02T14:03:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1260\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Daiana S\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Homehost\" \/>\n<meta name=\"twitter:site\" content=\"@Homehost\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Daiana S\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/\",\"name\":\"Como mudar background em JavaScript | Homehost\",\"isPartOf\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png\",\"datePublished\":\"2023-08-06T12:50:44+00:00\",\"dateModified\":\"2024-05-02T14:03:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\"},\"description\":\"Aprenda nesse artigo como mudar background javascript, criar gradientes e transi\u00e7\u00f5es suaves para melhorar os elementos da sua p\u00e1gina.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#primaryimage\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png\",\"contentUrl\":\"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png\",\"width\":1260,\"height\":630,\"caption\":\"Como mudar background JavaScript?\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"In\u00edcio\",\"item\":\"https:\/\/www.homehost.com.br\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Como mudar background em JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#website\",\"url\":\"https:\/\/www.homehost.com.br\/blog\/\",\"name\":\"Homehost\",\"description\":\"Hospedagem De Sites\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689\",\"name\":\"Daiana S\",\"description\":\"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como mudar background em JavaScript | Homehost","description":"Aprenda nesse artigo como mudar background javascript, criar gradientes e transi\u00e7\u00f5es suaves para melhorar os elementos da sua p\u00e1gina.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/","og_locale":"pt_BR","og_type":"article","og_title":"Como mudar background em JavaScript | Homehost","og_description":"Aprenda nesse artigo como mudar background javascript, criar gradientes e transi\u00e7\u00f5es suaves para melhorar os elementos da sua p\u00e1gina.","og_url":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/","og_site_name":"Homehost","article_publisher":"https:\/\/www.facebook.com\/Homehost\/","article_published_time":"2023-08-06T12:50:44+00:00","article_modified_time":"2024-05-02T14:03:34+00:00","og_image":[{"width":1260,"height":630,"url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png","type":"image\/png"}],"author":"Daiana S","twitter_card":"summary_large_image","twitter_creator":"@Homehost","twitter_site":"@Homehost","twitter_misc":{"Escrito por":"Daiana S","Est. tempo de leitura":"11 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/","url":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/","name":"Como mudar background em JavaScript | Homehost","isPartOf":{"@id":"https:\/\/www.homehost.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png","datePublished":"2023-08-06T12:50:44+00:00","dateModified":"2024-05-02T14:03:34+00:00","author":{"@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689"},"description":"Aprenda nesse artigo como mudar background javascript, criar gradientes e transi\u00e7\u00f5es suaves para melhorar os elementos da sua p\u00e1gina.","breadcrumb":{"@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#primaryimage","url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png","contentUrl":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png","width":1260,"height":630,"caption":"Como mudar background JavaScript?"},{"@type":"BreadcrumbList","@id":"https:\/\/www.homehost.com.br\/blog\/javascript\/mudar-background-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"In\u00edcio","item":"https:\/\/www.homehost.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Como mudar background em JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.homehost.com.br\/blog\/#website","url":"https:\/\/www.homehost.com.br\/blog\/","name":"Homehost","description":"Hospedagem De Sites","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.homehost.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.homehost.com.br\/blog\/#\/schema\/person\/eb90cb369d7098d6d85fa96c78ea1689","name":"Daiana S","description":"Graduada em Letras pelo Instituto Federal da Para\u00edba e especializada em reda\u00e7\u00e3o geral. Gosto de escrever sobre tudo e me dedico em v\u00e1rios n\u00edveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem. Contato: daiana.blog@homehost.com.br"}]}},"modified_by":"Daiana S","jetpack_featured_media_url":"https:\/\/www.homehost.com.br\/blog\/wp-content\/uploads\/2023\/08\/Mudando-background.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/10430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/comments?post=10430"}],"version-history":[{"count":6,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/10430\/revisions"}],"predecessor-version":[{"id":14008,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/posts\/10430\/revisions\/14008"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media\/10432"}],"wp:attachment":[{"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/media?parent=10430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/categories?post=10430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.homehost.com.br\/blog\/wp-json\/wp\/v2\/tags?post=10430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}