Os elementos HTML details e summary permitem que você crie uma interface interativa no estilo sanfona (“accordion“) que pode expandir ou recolher seu conteúdo, mostrando ou ocultando parte do texto ou mesmo outros elementos HTML.

Isso pode ser útil para exibir muitas informações em uma página sem sobrecarregar o usuário com muito texto de uma só vez.

O elemento details (“detalhes”) cria um contêiner para o conteúdo que você deseja expandir ou recolher. Já o elemento summary (“resumo”) é usado para criar o cabeçalho clicável para esse contêiner.

Quando o usuário clica no elemento de resumo, o conteúdo dentro do elemento details será expandido ou recolhido.

Vejamos um exemplo de como usar esses elementos em HTML:

<details>
  <summary>Clique aqui para expandir o conteúdo</summary>
    <p>Conteúdo que expandido ou colapsado ao clicar no texto do elemento summary.</p>
</details>

No exemplo acima, o elemento summary é usado como um cabeçalho clicável e o elemento de parágrafo dentro do elemento details é o conteúdo que será expandido ou recolhido:

Quando o usuário clica no texto do elemento summary, o elemento de parágrafo alterna entre ser exibido ou ocultado:

Podemos adicionar mais conteúdo dentro do elemento details, incluindo outros elementos HTML como cabeçalhos, listas ou imagens. Vejamos um exemplo de uso mais complexo desses elementos:

<details>
  <summary>Exibir lista de livros</summary>
    <h2>Livros</h2>
    <ul>
      <li>Cosmos</li>
      <li>Contato</li>
      <li>Pálido Ponto Azul</li>
      <li>Murmúrios da Terra</li>
    </ul>
    <img src="http://www.bosontreinamentos.com.br/wp-content/uploads/2023/02/cosmos-livro.jpg" alt="Imagem de exemplo">
</details>

Neste exemplo, há um cabeçalho de seção, uma lista e uma imagem dentro do elemento details. Quando o usuário clicar no elemento summary, todo esse conteúdo será expandido ou recolhido. A imagem a seguir mostra o conteúdo desse exemplo expandido:

Também podemos empregar CSS para estilizar os elementos details e summary, como por exemplo para alterar o tamanho da fonte, cor do texto ou cor de fundo. Abaixo temos um exemplo de como estilizar ambos os elementos:

<style>
  details {
    width: 250px;
    height: 250px;
  }
  summary {
    background-color: #ddd;
    padding: 10px;
    border-radius: 5px;
  }
</style>

Neste exemplo, o elemento summary terá uma cor de fundo cinza e cantos arredondados, e o elemento details tem seu tamanho delimitado em 250 pixels:

No geral, os elementos details e summary são uma forma simples e eficaz de criar um bloco colapsável no estilo sanfona em HTML. Eles podem ajudar a tornar o site mais fácil de usar e organizado, permitindo que os usuários se concentrem em um conteúdo específico por vez.

O post Mostrar e ocultar conteúdo com os elementos details e summary em HTML apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.

O método getElementById() permite obter um elemento do documento a partir de seu atributo ID especificado.

É um método importante e muito empregado para obter informações ou manipular um elemento em um documento HTML. É suportado atualmente por todos os navegadores mais comuns.

Este método retorna o valor null se nenhum elemento com o id especificado for encontrado.

Sintaxe:

document.getElementById("ID");

Onde o parâmetro ID é o valor do atributo id do elemento que desejamos obter.

Uma observação importante: o atributo ID é uma string case-sensitive, ou seja, que diferencia maiúsculas de minúsculas.

Como trabalhar com a propriedade value

Podemos utilizar a propriedade value para obter e manipular o valor inserido em um controle como textbox, password, textarea ou outros controles específicos em um formulário:

var item = document.getElementById("id-controle");

// Para verificar o valor:
console.log(item.value);

Podemos modificar o valor do controle por meio da propriedade value também:

item.value = "Novo valor atribuído";

Como trabalhar com a propriedade innerHTML

Podemos também obter ou modificar o valor presente em um elemento fora de um formulário, como um parágrafo <p> ou <span>, usando a propriedade innerHTML:

1 – Ler o valor de um elemento de id ID_elemento:

var x = document.getElementById("ID_elemento").innerHTML;

2 – Modificar o valor de um elemento de id ID_elemento:

document.getElementById("ID_elemento").innerHTML = "Novo valor";

Exemplos

Exemplo 01

Capturamos o texto digitado em uma caixa de texto do tipo input box e realizamos algumas ações sobre esse valor:

• Exibir uma mensagem em uma caixa de alerta
• Copiar o valor dessa caixa de texto para outra caixa de texto
• Escrever o valor no corpo da página, usando um elemento <span> e a propriedade innerHTML do objeto.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>getElementById JavaScript</title>
<meta charset="UTF-8">

<script>
function mensagem() {
var valorNome = document.getElementById("idNome").value;

// Exibir mensagem em caixa de alerta:
alert("Bem-vindo, " + valorNome);

// Copiar valor de uma caixa de texto para outra:
document.getElementById("idNomeDigitado").value = document.getElementById("idNome").value;

// Escrever na página (usando conteiner span):
document.getElementById("mostraValor").innerHTML = "Muito bem, " + valorNome + " !"; 
}
</script>
</head>

<body>
<p>Usando JavaScript getElementById</p>
<form name="teste" method="GET" >
<input type="text" name="nome" id="idNome"><br>
<input type="text" name="nomeDigitado" id="idNomeDigitado"> 
<button type="button" name="botao" id="idBotao" onclick="mensagem();">Clique Aqui</button>
</form>

<p><span id="mostraValor"></span></p>
</body>
</html>

Exemplo 02

Alteramos a cor de um elemento da página pressionando botões. Para isso vamos alterar as propriedades style.color, style.backgroundColor e style.borderBottom do elemento. Para isso criaremos duas funções distintas, mudaCor() e mudaCorFundo():

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Exemplo getElementById</title>
<meta charset="UTF-8">

<script>
estado = 0;
function mudaCor(cor) {
  var elemento = document.getElementById("item");
  elemento.style.color = cor;
}
    
function mudaCorFundo(cor) {
  var elemento = document.getElementById("item");
  if (estado == 0) {
    elemento.style.backgroundColor = "lightblue";
    elemento.style.borderBottom = "3px solid purple";
    estado = 1;
  }
  else {
    elemento.style.backgroundColor = "white";
    elemento.style.borderBottom = "none"; 
    estado = 0;
  }
}
</script>
</head>
<body>
<p>Se inscreva no canal da <span id="item">Bóson Treinamentos em Tecnologia</span>!</p>
<button onclick="mudaCor('green');">Verde</button>
<button onclick="mudaCor('magenta');">Magenta</button>
<br><br>
<button onclick="mudaCorFundo('blue');">Cor de fundo Azul</button>
</body>
</html>

Exemplo 03

Vamos criar um script que permite calcular o quadrado de um número digitado em uma caixa de input, exibindo o resultado em outra caixa de input e também no corpo da página:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>getElementById JavaScript</title>
<meta charset="UTF-8">

<script>
function calculaQuadrado() {
var valor = document.getElementById("idNumero").value;

// Calcular quadrado e inserir valor calculado na caixa de texto adequada:
var quadrado = valor * valor; 
document.getElementById("idCalculado").value = quadrado

// Escrever na página (usando conteiner span):
document.getElementById("calculaValor").innerHTML = "O quadrado calculado é " + quadrado + " .";

document.getElementById("numeroDigitado").innerHTML = "O quadrado de " + valor + " é: ";

// Para testes apenas:
console.log(idNumero.value);
}
</script>
</head>

<body>

<h2>Calcular o quadrado de um número</h2>

<form name="formTeste" method="GET" >
<input type="text" name="numero" id="idNumero"><br><br>
<button type="button" name="botao" id="idBotao" onclick="calculaQudrado();">Calcular Quadrado!</button><br><br>
<label for="idcalculado"><span id="numeroDigitado"></span></label>
<input type="text" name="valorQuadrado" id="idCalculado"> 
</form>

<p><span id="calculaValor"></span></p>
</body>
</html>

Exemplo 04

Agora vamos trabalhar com uma caixa de cores (HTML5), que nos permitirá selecionar as cores do texto e de fundo a serem aplicadas em um conteiner <span>:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Exemplo getElementById</title>
<meta charset="UTF-8">

<script>
estado = 0;

function mudaCores() {
  var elemento = document.getElementById("item");
  var cor = document.querySelector("#paletaCor");
  var corFundo = document.querySelector("#paletaCorFundo");
  if (estado == 0) {
    elemento.style.color = cor.value;
    elemento.style.backgroundColor = corFundo.value;
    elemento.style.border = "3px solid purple";
    elemento.style.fontSize = "200%";
    estado = 1;
  }
  else {
    elemento.style.color = "black";
    elemento.style.backgroundColor = "white";
    elemento.style.border = "none"; 
    elemento.style.fontSize = "100%";
    estado = 0;
  }
}
</script>
</head>

<body>

<p>Se inscreva no canal da <span id="item">Bóson Treinamentos em Tecnologia</span>!</p>
<label for="paletaCor">Cor do texto:</label>
<input type="color" value="#0000ff" id="paletaCor">

<label for="paletaCorFundo">Cor do fundo:</label>
<input type="color" value="#0000ff" id="paletaCorFundo">
<br><br>
<button onclick="mudaCores();">Aplica Cores Selecionadas</button>

</body>
</html>

Visualização:

Usando o método getElementById e caixa de Cores HTML para alterar cor de texto

Note que usamos um novo método: document.querySelector(). Este método permite ler um elemento HTML, recebendo como parâmetro um seletor CSS – no caso, usamos o ID da caixa de cores (elemento color). Se for usado o método getElementById() obteremos o mesmo resultado aqui – tente alterar o método para testar!

Falaremos de forma mais aprofundada sobre o querySelector() em outra lição.

O post Curso de JavaScript – Método getElementById() apareceu primeiro em Bóson Treinamentos em Ciência e Tecnologia.