23. Scroll in to view e hidden

Scrolling into view

Um truque simples, mas muito útil. Você pode fazer:

document.getElementById('aviso').scrollIntoView()

Isso vai rolar a página até que o elemento com o id "aviso" esteja visível no topo do viewport. Você pode passar um parâmetro opcional top:

document.getElementById('aviso').scrollIntoView(false)

O valor default é true. Se você passar false, a rolagem vai deixar o objeto visível na base do viewport.

hidden

Ocultar e exibir elementos é uma das tarefas mais comuns em Javascript. Em HTML5 existe um atributo específico para isso, o atributo hidden. Ao inserí-lo em um elemento assim:

<div hidden>Xi, se esconde!</div>

Ou assim:

<div hidden="true">Xi, se esconde!</div>

O elemento estará oculto.

hidden e Javascript

Acessar o atributo hidden em Javascript é muito conveniente:

function switchElement(elm){
  if(elm.hidden)
    elm.hidden=false
  else
    elm.hidden=true
}

Claro, você pode fazer:

function switchElement(elm){
  elm.hidden=!elm.hidden
}

Sugiro que você sempre use o atributo hidden. Descobrir se o elemento está oculto lendo as propriedades display e visibility do CSS, além de dar mais trabalho, pode gerar confusão.