Como alternar a visualização de um elemento html usando o javascript

Aprenda a criar, editar e visualizar suas páginas da Web na Visualização dinâmica. Reorganize ou insira elementos, aplique seletores, edite atributos de imagem, insira, edite e formate texto sem alternar para a Visualização de código.

A Visualização dinâmica usa um mecanismo de renderização baseado em Chromium para que o seu conteúdo tenha, no Dreamweaver, a mesma aparência que nos seus navegadores da Web favoritos.

Durante o desenvolvimento, você pode alternar para Visualização dinâmica a fim de visualizar rapidamente a página.

E, para poupar tempo ao alternar entre as diferentes visualizações (de código e de design), você pode editar elementos HTML diretamente na Visualização dinâmica.

A Visualização dinâmica é atualizada imediatamente, mostrando as alterações na página.

Você pode usar os seguintes componentes para editar a página na Visualização dinâmica:

  • Painel DOM: (Janela > DOM) mostra a estrutura HTML do documento e permite copiar e colar, duplicar, excluir e reorganizar os elementos na visualização. Consulte Painel DOM para obter mais informações.
  • Exibição do elemento: aparece acima do elemento HTML selecionado na Visualização dinâmica. A Exibição do elemento permite associar elementos HTML com classes e IDs. Consulte Associar elementos HTML com classes e IDs para obter mais informações.
  • Inspetor de propriedades rápido: aparece quando você clica no ícone de Encaixado em Exibição do elemento ou seleciona texto. O Inspetor de propriedades rápido permite editar os atributos de imagem e formatar texto na Visualização dinâmica. Consulte Inspetor de propriedades rápido para obter mais informações.
  • Inspetor de propriedades da visualização dinâmica: aparece abaixo da janela Documento e permite editar várias propriedades HTML e CSS na Visualização dinâmica. Consulte Inspetor de propriedades da visualização dinâmica para obter mais informações.
  • Painel Inserir: (Janela > Inserir) permite arrastar os elementos do painel diretamente na Visualização dinâmica. Consulte Inserir elementos diretamente na Visualização dinâmica para obter mais informações.

Observação:

Se sua página muda dinamicamente (por causa de scripts) ou tem o recurso metarefresh habilitado, talvez você perca as edições feitas na Visualização dinâmica.

Dicas:

  • Se a Visualização dinâmica ficar em branco durante a edição da página, desative-a e ative-a novamente.
  • Se as edições não estiverem refletidas na página, clique no botão Atualizar na Visualização dinâmica.

O conteúdo que é processado dinamicamente em bancos de dados ou JavaScript, bem como as regiões não editáveis em modelos, não podem ser editados na Visualização dinâmica. Quando você clica nesses elementos na Visualização dinâmica, uma borda cinza ao redor deles é exibida para indicar que não é possível editá-los.

Como Alternar a Visualização de um Elemento HTML Usando o JavaScript

Um elemento com uma borda cinza na Visualização dinâmica não pode ser editado

Observação:

Na Visualização dinâmica, somente as opções aplicáveis ao elemento selecionado são disponibilizadas no menu principal. As opções não aplicáveis ficam esmaecidas quando o elemento é selecionado.

Usando a Exibição do elemento, é possível associar elementos HTML a classes e IDs diretamente na Visualização dinâmica. A Exibição do elemento indica as classes e IDs disponíveis para ajudá-lo a exibir e escolher a opção necessária rapidamente. 

Você também pode formatar tabelas usando a Exibição do elemento. Para obter mais informações, acesse o link.

Clique no elemento necessário na Visualização dinâmica. A Exibição do elemento aparece e exibe a ID e classe associadas no momento.

Na Visualização dinâmica, você também pode clicar no elemento HTML no Painel DOM para exibi-lo na Exibição do elemento.

Como Alternar a Visualização de um Elemento HTML Usando o JavaScript

Exibição do elemento para o elemento

  • Para dissociar o elemento HTML de uma classe ou ID, clique no “x” adjacente à classe ou à ID.
  • Para alterar a classe ou a ID associada ao elemento HTML, clique na caixa. Uma lista de classes e IDs disponíveis é exibida. Clique na opção necessária.
  • Para adicionar uma classe ou uma ID e aplicá-la ao elemento, clique em “+” e digite o nome. Para salvar as alterações, clique em “+” ou pressione Enter.

Em seguida, você pode usar o CSS Designer para definir um seletor que inclua essa classe ou ID. Para obter mais informações, consulte Aplicar layout às páginas usando o CSS Designer.

Observação:

A Exibição do elemento de elementos transicionais não é movida com os elementos quando a transição é acionada. No entanto, as alterações feitas com o uso da Exibição do elemento entrarão em vigor mesmo que essa exibição não esteja no mesmo local do elemento transitional. 

O Inspetor de propriedades rápido aparece logo em cima dos elementos selecionados na Visualização dinâmica. Usando o Inspetor de propriedades, você pode editar atributos ou formatar texto na Visualização dinâmica.

Como Alternar a Visualização de um Elemento HTML Usando o JavaScript

O Inspetor de propriedades rápido, que é exibido logo acima da página de elementos na Visualização dinâmica

Para mostrar ou ocultar o Inspetor de propriedades rápido, pressione Ctrl + Alt + H (Win)/CMD + Ctrl + H (Mac).

Observação:

O ícone do Navegador de código não é exibido na Visualização dinâmica quando você usa o Inspetor de propriedades rápido.

O Inspetor de propriedades rápido também inclui opções para personalizar imagens em documentos do Bootstrap.

Como Alternar a Visualização de um Elemento HTML Usando o JavaScript

Inspetor de propriedades rápido de imagens em documentos do Bootstrap

  • Cortar para ajustar: clique para tornar os cantos de imagens circulares ou arredondados, ou para transformá-los em miniaturas.
  • Tornar a imagem responsiva: clique para tornar imagens responsivas e adaptá-las a vários tamanhos de tela.
Leia também:  Como calcular impedância: 10 passos (com imagens)

O Inspetor de propriedades rápido para texto na Visualização dinâmica permite formatar, recuar e criar hiperlinks de texto rapidamente. O Inspetor de propriedades rápido para texto é exibido quando você clica no ícone de encaixado para os elementos de texto h1-h6, pre e p.

Como Alternar a Visualização de um Elemento HTML Usando o JavaScript

Inspetor de propriedades rápido de texto

JavaScript e interatividade na Web | Desenvolvimento Web com HTML, CSS e JavaScript

“Design não é só como uma coisa aparenta, é como ela funciona.” — Steve Jobs

9.1 Porque usamos JavaScript?

Na página de produto criamos um input range para selecionar o tamanho da roupa. O problema
é que não há feedback visual de qual valor está selecionado. Então criamos um outro
elemento visual na página apenas para mostrar o valor atualmente selecionado no range.

No HTML5, temos uma tag nova com valor semântico exato pra essa situação: o .
Essa tag representa a saída de algum cálculo ou valor simples obtido a partir de um ou mais
campos de um formulário. Ele tem um atributo for que aponta de qual elemento saiu o
seu valor.

42

O valor em si está como 42 porque colocamos na mão, dentro da tag. O que precisamos
é atualizar esse valor toda vez que o valor do input range mudar, ou seja, toda vez que o
usuário arrastar o input range.

O HTML vem pronto para o navegador com todo seu conteúdo e tags. Mudar o conteúdo
de uma tag baseado numa ação do usuário (dentro do navegador) não é função do HTML.
Pra isso, precisamos do JavaScript.

9.2 Um pouquinho da história do JavaScript

No início da Internet as páginas eram pouco ou nada interativas, eram documentos
que apresentavam seu conteúdo exatamente como foram criados para serem exibidos no
navegador.

Existiam algumas tecnologias para a geração de páginas no lado do servidor,
mas havia limitações no que diz respeito a como o usuário consumia aquele conteúdo.

Navegar através de links e enviar informações através de formulários era
basicamente tudo o que se podia fazer.

Nasce o JavaScript

Visando o potencial da Internet para o público geral e a necessidade de haver
uma interação maior do usuário com as páginas, a Netscape, criadora do navegador
mais popular do início dos anos 90, de mesmo nome, criou o Livescript, uma
linguagem simples que permitia a execução de scripts contidos nas páginas dentro
do próprio navegador.

Aproveitando o iminente sucesso do Java, que vinha conquistando cada vez mais espaço
no mercado de desenvolvimento de aplicações corporativas, a Netscape logo rebatizou o
Livescript como JavaScript num acordo com a Sun para alavancar o uso das duas. A então
vice-líder dos navegadores, Microsoft, adicionou ao Internet Explorer o suporte a
scripts escritos em VBScript e criou sua própria versão de JavaScript, o JScript.

JavaScript é a linguagem de programação mais popular no desenvolvimento Web. Suportada por
todos os navegadores, a linguagem é responsável por praticamente qualquer tipo de dinamismo
que queiramos em nossas páginas.

Combinando CSS e Javascript para manipular HTML

CSS e Javascript, combinados com HTML, proporcionam um recurso extremamente poderoso para a criação de páginas HTML dinâmicas (DHTML), onde é possível alterar o layout da página sem que seja necessário um novo acesso ao servidor web.

É importante lembrar que DHTML não é um termo muito recente, de fato está caindo em desuso.

Isso acontece porque os navegadores mais novos, que suportam CSS3 e HTML5, já não precisam tanto do Javascript para criar efeitos na página.

Porém, como ainda damos suporte para os navegadores antigos, e é importante que você saiba como combinar CSS e Javascript com o DOM HTML (Document Object Model) para criar efeitos para todos os navegadores.

CSS e Javascript

Para alterar o CSS de qualquer elemento de uma página HTML utilizando Javascript, você utiliza um dos métodos que expliquei na última aula para localizar tal elemento, sua propriedade style e uma propriedade CSS qualquer.

// Localiza o elemento
var div = document.getElementById('minha_div');

// Altera várias propriedades de CSS do elemento
div.style.width = '700px';
div.style.height = '700px';
div.style.background = 'red';

  • Dica: Lembre-se de colocar os trechos de código desse artigo em uma função dentro do evento load da página (veja Eventos em Javascript).
  • O trecho de código acima altera a largura (width = '700px'), a altura (height = '700px') e a cor de fundo (background = 'red') de um elemento DIV com id “minha_div”.
  • As propriedades Javascript são as mesmas do CSS em nomes que têm apenas uma palavra, no entanto, em nomes compostos – background-color, por exemplo – você deve remover o traço do meio e colocar a primeira letra do segundo nome em maiúsculo, veja abaixo:

// Altera a propriedade CSS background-color
div.style.backgroundColor = 'red';

Após a utilização de Javascript para alterar qualquer elemento da página, um atributo style é configurado para tal elemento, isso significa que a DIV abaixo:

Ficou assim no meu exemplo:

  1. Repare que o atributo style foi configurado com todas as opções que determinei pelo Javascript.
  2. Por outro lado, se configurar o style de qualquer elemento HTML é tão simples quanto o que descrevi anteriormente, capturar o estilo atual do elemento não é tão simples assim, e aqui novamente entramos no problema de diferença entre os navegadores.
  3. Temos duas opções disponíveis: getComputedStyle, que funciona em TODOS (ou quase, vai saber) os navegadores em suas versões atuais, e currentStyle, que funciona apenas em versões antigas do Internet Explorer e Opera.
  4. Por este motivo, sempre teremos que utilizar estruturas condicionais para saber se um objeto tem uma das duas propriedades:
Leia também:  Como apagar o fundo de uma imagem usando o gimp

if( 'getComputedStyle' in window ){
// Obtém a altura do objeto div
var altura = window.getComputedStyle(div).height;
} else if ( 'currentStyle' in div ) {
// Obtém a altura do objeto div
var altura = div.currentStyle.height;
} else {
// Não suporta
alert('Navegador não suporta getComputedStyle nem currentStyle.');
}

Observe que utilizei a palavra in na estrutura condicional if, para verificar se determinada propriedade existe no objeto (window, na primeira tentativa e div na segunda).

Se sim, true é retornado e a estrutura condicional passa; se não, retorna false e a estrutura condicional não executa tal ação.

Por fim, utilizei o else, se nenhuma das condições anteriores for verdadeira, ou seja, o navegador não suporta getComputedStyle, nem currentStyle.

Outra diferença que você vai perceber aqui, é que as cores serão retornadas de maneiras diferentes em cada navegador. No meu teste, executei uma operação para recuperar a propriedade “backgroundColor” no Internet Explorer 6 e no Mozilla Firefox 29.0 (um muito antigo; outro muito recente).

A diferença aqui é que o Internet Explorer 6 retornou “red” (vermelho) e o Mozilla Firefox 29.0 retornou rgb(255, 0, 0) (também vermelho, mas em RGB).

É importante que você, como um desenvolvedor Javascript, teste sua aplicação em todos os navegadores possíveis, pois, as diferenças não param por aí, você vai encontrar diferenças no seu CSS, no Javascript e até no código HTML em si.

Brincando com HTML, CSS e Javascript

Agora que já expliquei como você faz para alterar e obter o estilo CSS de um elemento utilizando Javascript, veja tudo o que eu descrevi em um único código:

O HTML

Clique

O Javascript

// Captura o evento load da página
window.onload=function(){
// Localiza o elemento
var div = document.getElementById('minha_div');

// O link
var clique = document.getElementById('clique');

// Captura o evento de clique no link
clique.onclick=function(){
// Verifica se getComputedStyle é suportado
if( 'getComputedStyle' in window ){
var largura = window.getComputedStyle(div).width;
} else {
// Obtém a largura para navegadores antigos
var largura = div.currentStyle.width;
}

// Garante que temos apenas números
largura = parseInt(largura);

// Configura mais 10 na largura
largura += 10;

// Configura aumenta o tamanho da div a cada clique
div.style.width = largura + 'px';

// Retorna falso para não atualizar a página
return false;
}
}

  • Apesar de se tratar de um exemplo muito simples com captura de eventos mais antiga, a cada clique no link “Clique”, o Javascript verifica a largura atual da DIV “minha_div” e soma mais 10 pixels, assim, ela vai aumentando a largura de acordo com o usuário.
  • Clique no link “Clique” abaixo e veja como funciona:
  • See the Pen Exemplo de CSS, Javascript e HTML by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.
  • Outra coisa que podemos fazer, seguindo o mesmo estilo, é mostrar ou ocultar um elemento utilizando a propriedade display do CSS no Javascript.
  • Para isso eu utilizaria o mesmo HTML utilizado no trecho anterior, e mudaria o Javascript para:

// Captura o evento load da página
window.onload=function(){
// Localiza o elemento
var div = document.getElementById('minha_div');
// Esconde a DIV
div.style.display = 'none';

// O link
var clique = document.getElementById('clique');

// Captura o evento de clique no link
clique.onclick=function(){
// Verifica se getComputedStyle é suportado
if( 'getComputedStyle' in window ){
var display = window.getComputedStyle(div).display;
} else {
// Obtém a opção display para navegadores antigos
var display = div.currentStyle.display;
}

// Verifica se display é none
if( display == 'none' ){
// Muda para display block
div.style.display = 'block';
} else {
// Muda para display none
div.style.display = 'none';
}

// Retorna falso para não atualizar a página
return false;
}
}

  1. Você também pode visualizar e testar este exemplo no Codepen abaixo:
  2. See the Pen Show and hide element by Luiz Otávio Miranda Figueiredo (@luizomf) on CodePen.
  3. Dica: Se você não conhece o Codepen, você pode clicar em “Edit” na caixa acima e alterar o código como quiser para treinar.
  4. Outro exemplo interessante é fazer uma espécie de efeito para que a largura do elemento seja alterada, por exemplo.
  5. Neste caso, você pode utilizar um temporizador para que a propriedade seja alterada a cada vez que uma função for chamada, fazendo com que a largura seja aumentada gradualmente.
  6. Veja abaixo a modificação no Javascript:

// Captura o evento load da página
window.onload=function(){
// Localiza o elemento
var div = document.getElementById('minha_div');

// O link
var clique = document.getElementById('clique');

// Captura o evento de clique no link
clique.onclick=function(){
// Verifica se getComputedStyle é suportado
if( 'getComputedStyle' in window ){
var largura = window.getComputedStyle(div).width;
} else {
// Obtém a largura para navegadores antigos
var largura = div.currentStyle.width;
}

// Configura uma largura máxima
var largura_maxima = 1000;

// Cria uma função para aumentar a largura
function aumenta_largura(){
// Soma 100 na largura
largura = parseInt( largura ) + 100;

// Configura a nova largura da DIV
div.style.width = largura + 'px'

Leia também:  Como arrotar alto: 12 passos (com imagens)

// Verifica se a largura atingiu a largura máxima
if ( largura

Elementos Bloco e Em Linha

Todos os elementos HTML podem ser separados em dois grupos, em termos de comportamento visual CSS: elementos bloco (block) e elementos em linha (inline).

Ser bloco ou em linha muda o comportamento visual do elemento, além de outras características, o que veremos a seguir.

Apesar de podermos mudar o modo de exibição de cada elemento com CSS, cada tag por padrão pertence a um ou outro grupo.

Elementos bloco ocupam todo o espaço horizontal disponível e iniciam uma nova linha no documento. Novos elementos irão começar na próxima linha livre.

Visualizar Exemplo

Exemplos de elementos bloco:

  • div (division, ou divisão, tag bloco genérica)
  • h1 até h6 (títulos)
  • p (parágrafo)
  • blockquote (citação em bloco)
  • ul (lista não ordenada)
  • ol (lista ordenada)
  • form (para formulários, veremos mais na unidade “Trabalhando com Formulários”)

Elementos em linha ocupam apenas o espaço necessário e não iniciam uma nova linha. São chamados elementos em linha justamente por aparecer na mesma linha que outros elementos, caso seja possível.

Visualizar Exemplo

Exemplos de elementos em linha:

  • span (tag em linha genérica)
  • strong (destaca importância)
  • em (ênfase)
  • a (âncora, usada para links)
  • img (imagem)

Aninhamento de Elementos

Uma página é feita de blocos empilhados. Dito isso, muitas vezes iremos inserir um elemento dentro de outro para conseguirmos construir um layout adequado e com a hierarquia de informações que desejamos. Inserir um elemento dentro de outro chama-se aninhamento (ou nesting) e em documentos HTML há algumas regras principais a serem notadas:

  • Elementos bloco podem conter qualquer elemento em linha;
  • Elementos bloco podem conter outros elementos bloco, observadas algumas restrições (por exemplo, não podemos colocar uma div dentro de um parágrafo mas o contrário é válido). Geralmente segue-se o bom-senso nesses casos;
  • Elementos em linha nunca poderão conter elementos bloco (ex: colocar um parágrafo dentro de um link ou uma div dentro de uma span). A HTML5 apresenta algumas mudanças no caso do que links (tags a) podem englobar, exceto isso esta regra é geral;
  • Elementos em linha podem conter outros elementos em linha (por exemplo, colocar span dentro de um link ou o contrário).

Aplicação de Propriedades CSS

Além das diferenças já apresentadas, elementos bloco ou em linha também diferem nas propriedades CSS que podem ser aplicadas com confiabilidade. Elementos em linha podem ter os seguintes tipos de propriedades modificadas:

  • Cores de texto e de fundo;
  • Propriedades de texto, como font-family, font-size e outras, como text-decoration;
  • Bordas.

Propriedades como width, height, margin e padding podem surtir efeito no elemento em questão mas geralmente não irão afetar os outros elementos. Ou seja, para fins de layout e posicionamento, quando se usam muitas definições de dimensões e margens, usar elementos em linha não é recomendado.

Elementos bloco, além de todas as propriedades dos elementos em linha, também podem ter modificadas:

  • Largura (width) e altura (height);
  • Margens internas (padding) e externas (margin).

Quando queremos usar tags como a para compor um menu, na grande parte das vezes a transformamos em elemento bloco. Para isso, usa-se a importante propriedade display CSS.

A Propriedade Display

A propriedade display serve para mudarmos o comportamento visual de um elemento, como mudar uma tag a (em linha) para bloco ou uma tag p para elemento em linha. Ela aceita vários valores, dos quais os principais são:

  • block: elemento aparece como se fosse bloco;
  • inline: elemento aparece como se fosse em linha;
  • none: elemento não aparece, útil quando utilizado junto com JavaScript para fazê-lo aparecer com algum efeito visual, entre outras aplicações.

Lembre-se: mesmo que mudarmos visualmente como um elemento aparece na página, as regras de aninhamento ainda são as mesmas.

Vejamos um exemplo abaixo:

.link-normal {
background: #00F;
color: #FFF;
margin: 10px;
padding: 20px;
border: 1px solid #000;
}

.link-bloco {
display: block;
background: #00F;
color: #FFF;
margin: 10px;
padding: 10px;
border: 1px solid #000;
}

Visualizar Exemplo

Perceba a diferença entre os dois elementos: enquanto o link em linha ocupa apenas o espaço necessário para o texto, o link bloco ocupa toda a largura permitida da página.

Além disso, apesar das propriedades margin e padding terem sido aplicadas, elas não afetam os outros elementos da mesma forma.

A margem interna do link em linha, por exemplo, está fazendo efeito porém não afeta os elementos ao seu redor (perceba que a área do link está sobrepondo a do link bloco).

Portanto, quando montamos layouts, normalmente iremos converter os elementos para bloco (ou então utilizaremos elementos bloco) pois permitem maior controle sobre as dimensões, posicionamento e margens. Por exemplo, a utilização de uma ul com links convertidos para bloco é a base de muitos menus de websites hoje.

Experimente com diferentes elementos e descubra quais são bloco e quais são em linha por padrão. Também experimente com a propriedade display para verificar a mudança de comportamento entre elementos. Iremos utilizar bastante esta propriedade na construção do nosso website.

Seja o primeiro a comentar

Faça um comentário

Seu e-mail não será publicado.


*