xost, publicación de artículos gratis, participación ciudadana, notas de prensa
  Usuario: Clave:    
 
 
Documento sin título
 
Documento sin título
 
Documento sin título
Home
Xnechijli01 10/16/2019 12:30:13 PM
Xnechijli01
Ocultar elementos en html
Ocultar elementos en html con javascript
votos 0 comentarios 0 enviar vínculo a un amigo
Tags JavaScript
 
Cómo ocultar y Mostrar elementos usando javascript en html
 

Como parte de nuestro curso de JavaScript te mostramos como ocultar o mostrar elementos en HTML usando la propiedad de visualización es una tarea común en la programación de páginas web. Esto le dará una mejor vista a tus páginas web y les dará dinamismo.

La propiedad de visualización de estilo se utiliza para ocultar y mostrar el contenido de HTML DOM accediendo al elemento DOM usando JavaScript / jQuery.

Preparación del código

 Antes que nada aclarar que damos por sentado que conoces html y css Por lo que no daremos explicaciones muy detalladas. Para ocultar un elemento, debes establecer la propiedad de visualización de estilo en "none". El código quedaría de la siguiente manera:

document.getElementById ("element"). style.display = "none";

Para mostrar un elemento, establece la propiedad de visualización de estilo en bloque usando la etiqueta "block":

document.getElementById ("elemento"). style.display = "block";

 Una vez que hemos hecho esto debemos seguir los siguientes pasos para mostrar el funcionamiento de la propiedad de visualización de estilo. Primero abre una etiqueta div y asígnale una identificación o clase y luego agréguale estilo. Podría quedar algo así:

<div class="circle" id="circle"></div> 
<div class="rounded" id="rounded"></div> 
<div class="square" id="square"></div> 

El ancho y la altura establecerán el tamaño del contenido, el radio del borde 0% formará un borde cuadrado, el 50% formará un círculo y el 25% formará una forma redondeada y el flotador hará que los divs se posicionen, margen derecho los separará con un espacio a la derecha.

<style type="text/css"> 
       .circle { 
           width: 130px; 
           height: 130px; 
           border-radius: 50%; 
           float: left; 
           margin-right: 50px; 
       } 
 
       .rounded { 
           width: 130px; 
           height: 130px; 
           border-radius: 25%; 
           float: left; 
           margin-right: 50px; 
       } 

       .square { 
           width: 130px; 
           height: 130px; 
           border-radius: 0%; 
           float: left; 
           margin-right: 50px; 
       } 

En la próxima nota terminaremos escribir el código. Por el momento te animamos a que veas nuestro curso de php con el fin que mejores tu diseño y construcción de páginas web. También puedes visitar nuestro curso de kotlin

Te gustó esta nota, compártela con tus amigos
ico_copada.gif ico_delicious.png ico_enchilame.gif ico_facebook.png ico_fresqui.gif ico_google.gif ico_meneame.gif ico_myspace.gif ico_technorati.png ico_twitter.gif ico_yahoo.png
Visitá otras notas de Xnechijli01
Cómo evitar que Android detenga una aplicación
El hilo principal en Android
Kotlin Coroutines para principiantes
Inicio de codificación con kotlin
Curso intensivo de kotlin
El scriping en Kotlin
 
Comentarios 0  
Enviá tu comentario
Para dejar tu comentario debes ser miembro de xost.
 
Documento sin título
 
Documento sin título
PARTICIPANTES
8 A B C D E F G H I J K L M N O P Q R S T U V W X Y
 
Documento sin título
 
 
 
 
Documento sin título
 
Nos contaron qué leen
Qué lees
+ comentarios
Documento sin título
 
Documento sin título
ULTIMOS PUBLICADOS Internet
Confirmación para abandonar sitio web con javascript
Xnechijli01
Ventana emergente confirmación de abandono de sitio web
 
10/23/2019 10:35:04 PM
 
Mostrar elementos en html
Xnechijli01
Javascript para mostrar elementos
 
10/16/2019 12:32:38 PM
 
Ocultar elementos en html
Xnechijli01
Cómo ocultar y Mostrar elementos usando javascript en html
 
10/16/2019 12:30:13 PM
 
Los blogs de Internet
Xnechijli01
El uso de los blogs en la sociedad actual
 
8/26/2019 8:53:55 PM
 
Que es un avatar en Internet
Xnechijli01
Los avatares dentro de la web actual
 
8/26/2019 8:46:15 PM
 
Las características de HTML5
Xnechijli01
Estás son algunas de las características propias de HTML5
 
8/21/2019 6:28:48 PM
 
Multidifusión en la web
Xnechijli01
Qué es y cómo funciona la multidifusión en la web
 
8/20/2019 8:46:00 PM
 
Implementa el hacking etico en tu corporacion y evita pedidas de informacion
aaragones
Rompiendo las barreras de lo imposible
 
5/19/2018 6:20:53 AM
 
Arquitectos técnicos Madrid, profesionalidad y dedicación
redaccion2pe
Los arquitectos técnicos Madrid pondrán en marcha sus capacidades para resolver el problema y de esta forma entregar una estructura perfecta e impecable.
 
2/9/2017 6:47:31 AM
 
Curso Prestashop: Expande tus posibilidades en el mercado online
redaccion2pe
Es un hecho que la tecnología está para usarla. Hoy en día casi todo se resuelve vía Internet, por esta razón, para cualquier persona que desee iniciar un negocio es preciso que se asegure de estar lo
 
1/26/2017 5:05:20 AM
 
+ publicaciones
Documento sin título
 
Documento sin título
 
Documento sin título
 
 
Documento sin título
 
 
 
Documento sin título
 
Publicar es gratis, sólo tienes que registrarte y escribir.