Tutorial básico do JavaScript

Objeto do JavaScript

Função do JavaScript

DOM HTML do JS

BOM do navegador JS

Tutorial básico de AJAX

Manual de referência do JavaScript

Alteração das propriedades do elemento do JS DOM Alteração do conteúdo HTML do JS DOM

Alteração do CSS do JS DOM

O DOM HTML permite que o JavaScript obtenha e altere o estilo (CSS) dos elementos HTML.

para alterar o estilo do elemento

Você pode usarstylepropriedade aplica estilos a um elemento HTML específico.

Para alterar o estilo de um elemento HTML, use a seguinte sintaxe:

element.style.property　=　value

Os seguintes exemplos alteram<h1>Estilos do elemento:

Exemplo

<!DOCTYPE　html>
<html>
<h1　id="demo">Propriedade de estilo do DOM HTML</h1>
<script>
document.getElementById("demo").style.color　=　"blue";
</script>
</html>

Teste e veja‹/›

Quando o usuário clicar no botão, este exemplo altera<h1>Estilos do elemento:

Exemplo

<h1　id="demo">Propriedade de estilo do DOM HTML</h1>
<button　onclick="myFunc()">Clique</button>
<script>
function　myFunc()　{
　　　document.getElementById("demo").style.color　=　"blue";
}
</script>

Teste e veja‹/›

Quando o usuário clicar no botão, este exemplo também altera<h1>Estilos do elemento:

Exemplo

<h1　id="demo">Propriedade de estilo do DOM HTML</h1>
<button　onclick="document.getElementById('demo').style.color　=　'blue';">Clique</button>

Teste e veja‹/›

para obter informações de estilo de um elemento

Da mesma forma, você pode usarstylepropriedade que aplica estilos a elementos HTML.

Os seguintes exemplos aplicam estilos a elementos HTML comid="demo"obter informações de estilo de um elemento (border-top）：

Exemplo

var　x　=　document.getElementById("demo").style.borderTop;

Teste e veja‹/›

Atenção：ao obter informações de estilo de um elementostyleAs informações de estilo, essa propriedade não é muito útil, porque ela retorna apenas as regras de estilo definidas na propriedade style do elemento, sem retornar regras de estilo de outras origens, por exemplo, estilos de folha de estilo embutida ou folha de estilo externa.

Para obter os valores das propriedades CSS realmente usadas para exibir um elemento, você pode usar o seguintewindow.getComputedStyle()Método：

Exemplo

let　para　=　document.querySelector('p');
let　compStyles　=　window.getComputedStyle(para);
para.innerHTML　=　'font-size:　'　+　compStyles.getPropertyValue('font-size');
para.innerHTML　+=　'<br>line-height:　'　+　compStyles.getPropertyValue('line-height');
para.innerHTML　+=　'<br>padding:　'　+　compStyles.getPropertyValue('padding');

Teste e veja‹/›

Adicionar classes CSS ao elemento

Você também pode usarclassNameA propriedade obtém ou define a classe CSS do elemento HTML.

Exemplo

document.getElementById("x").className = "para";

Teste e veja‹/›

Você também pode usar oclassListobter, definir ou excluir classes CSS de um elemento com facilidade.

O exemplo a seguir permite<p>Adicionar umaparaClasse:

Exemplo

var elem = document.getElementById("x");
elem.classList.add("para");

Teste e veja‹/›

Adicionar várias classes a<p>Elemento:

Exemplo

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Teste e veja‹/›

De<p>Remover uma classe do elemento:

Exemplo

var elem = document.getElementById("x");
elem.classList.remove("para");

Teste e veja‹/›

Alternar entre duas classes<p>Elemento:

Exemplo

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Teste e veja‹/›

Alternar uma classe (‘abrir’) para criar botão de navegação lateral:

Executar código

Alteração das propriedades do elemento do JS DOM Alteração do conteúdo HTML do JS DOM