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:32:38 PM
Xnechijli01
Mostrar elementos en html
Cómo mostrar elementos en html usando javascript
votos 0 comentarios 0 enviar vínculo a un amigo
Tags JavaScript
 
Javascript para mostrar elementos
 

Esta es la segunda nota referente a cómo ocultar y mostrar elementos con JavaScript y CSS en HTML. Sugerimos que antes de continuar viendo este tema leas la nota anterior para que lo comprendas plenamente. Sin más por el momento continuamos con esta parte de nuestro curso de JavaScript

En este caso el color de fondo establecerá el color del div, como se puede ver en el siguiente ejemplo:

#circle { 
           background-color: #196F3D; 
       }

#rounded { 
           background-color: #5DADE2; 
       }
         
#square { 
           background-color: #58D68D; 
       } 

 Por otro lado la expresión "Document.getElementById" seleccionará el div con la identificación dada.

<script type="text/javascript"> 
       document.getElementById("circle").onclick = function()

 Por otro lado la expresión style.display = "none" lo hará desaparecer al hacer clic en div.

.style.display = "none"; 

Implementación de la propiedad style.display:

<html> 
<head> 
    <title>Javascript</title> 
    <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; 
        } 
          
        #circle { 
            background-color: #196F3D; 
        } 

        #rounded { 
            background-color: #5DADE2; 
        }      

        #square { 
            background-color: #58D68D; 
        } 
    </style>

</head> 
<body> 
    <div class="circle" id="circle"></div> 
    <div class="rounded" id="rounded"></div> 
    <div class="square" id="square"></div> 
   <script type="text/javascript">
       document.getElementById("circle").onclick = function() { 
            document.getElementById("circle").style.display = "none"; 
        } 
        document.getElementById("rounded").onclick = function() { 
            document.getElementById("rounded").style.display = "none"; 
        } 
        document.getElementById("square").onclick = function() { 
            document.getElementById("square").style.display = "none"; 
        } 
    </script> 
</body> 
</html> 

Salida: La salida del código anterior es:

La forma cuadrada desaparecerá después de hacer clic en ella: De forma similar, la forma redondeada desaparecerá después de hacer clic en ella: Del mismo modo, la forma del círculo desaparecerá después de hacer clic en ella.

En las siguientes notas seguiremos hablando de este tema. Por el momento te animamos a que veas nuestro curso de C# y el curso de kotlin para que mejores tu comprensión del uso de base de datos. Esto también mejorará tu diseño web. 

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.