Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17684
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Esconder elementos da página no carregamento CSS, JavaScript e jQuery

27-12-2016 23:40

Nesse post vou dar uma dica para quem deseja esconder objetos da página no carregamento.
Seja div, input, tabelas, formulários, labels, etc. Enfim qualquer elemento HTML que receba ID.

Com esse método os elementos do HTML já carregam na página escondidos.
E nesse post vou mostrar como fazer isso em 3 linguagens diferentes: CSS, JavaScript e jQuery.

CSS

Para esconder elementos pelo CSS podemos fazer da seguinte forma:

#elemento1, #elemento2 { display:none; }

Como mostrado acima você pode usar n elementos separando apenas por vírgula.
Lembrando que no CSS:

# + elemento é referente ao ID
. + nome do elemento é referente a classe


Vejamos o exemplo abaixo

<style> #elemento1, #elemento2{ display:none; } </style> <div id="elemento1">1</div> <div id="elemento2">2</div>

JavaScript

Em JavaScript precisamos usar o document.getElementById da seguinte forma:

<script> window.onload = function() { document.getElementById("elemento1").style.display="none"; document.getElementById("elemento2").style.display="none"; } </script> <div id="elemento1">1</div> <div id="elemento2">2</div>

jQuery

Já em jQuery fazemos uso do hide da seguinte forma:

<script src="jquery.js"></script> <script> $(function() { $("#elemento1, #elemento2").hide(); }); </script> <div id="elemento1">1</div> <div id="elemento2">2</div>

4
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado