sintgamas, artículos
 
Usuario:   Clave:    
   
Escribí lo que quieras:  
 
  Gastronomía| Moda| Mascotas| Industria| Om| Mi lugar| Economía| Política| Humor| Ecología| Turismo| Educación| Inmobiliarias| Sociedad| El mundo| Ocio| Música| Ciencia| Tecnología| Internet| Posicionamiento| Diseño| Deporte| Salud| Letras| Cine| Juegos| Miscelaneas| Cultura| Escultura| Pintura| Clasificados| Televisión| Alternativas| Recetas| Telefonía|  
   
 
 
27 La juventud es una religión de la cual uno siempre acaba por apartarse.André Malraux   por   Rafa*
 
 
Xnechijli01 10/16/2019 | 10:20:30  
 
Javascript para mostrar y ocultar elementos
Este código permite mostrar y ocultar elementos en una página web
Tags:
  JavaScript              
 

Mostrar y ocultar elementos con JS es bastante sencillo. Agregar efectos de transición como los que admite jQuery es un poco más difícil.

 Como parte de nuestro curso de JavaScript, veamos cómo escribir métodos simples de mostrar / ocultar. En próximas notas veremos cómo agregar animaciones de transición.

Simple Mostrar y Ocultar #

Los métodos show (), hide () y toggle () de jQuery usan CSS en línea para cambiar la propiedad de visualización de un elemento. Como sin duda sabes, eso es fácil de hacer con la propiedad de estilo.

// Show an element
var show = function (elem) {
elem.style.display = 'block';
};

// Hide an element
var hide = function (elem) {
elem.style.display = 'none';
};

// Toggle element visibility
var toggle = function (elem) {

// If the element is visible, hide it
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
return;
}

// Otherwise, show it
show(elem);

};

Notarás que estamos usando getComputedStyle (), para verificar si un elemento es visible. También podríamos verificar la propiedad de estilo, pero el elemento podría ocultarse a través de algún otro CSS (una hoja de estilo externa, por ejemplo) además de un estilo en línea.

Usar una clase en lugar de estilos en línea #

Si bien el CSS en línea funciona, Preferimos usar una clase para controlar comportamientos como este. Te da más control y es más rápido para que el navegador lo procese.

El conjunto de métodos classList nos permite agregar, eliminar y alternar clases, por lo que este enfoque no requiere lógica. El navegador hace todo el trabajo pesado por nosotros.

// Show an element
var show = function (elem) {
elem.classList.add('is-visible');
};

// Hide an element
var hide = function (elem) {
elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {
elem.classList.toggle('is-visible');
};

También necesitamos agregar algo de CSS para controlar la visibilidad de nuestro contenido.

.toggle-content {
display: none;
}

.toggle-content.is-visible {
display: block;
}

Usa la clase .is-visible para hacerla visible de manera predeterminada. Déjalo apagado para ocultarlo.

<div class="toggle-content is-visible">Visible by default.</div>
<div class="toggle-content">Hidden by default.</div>

 En próximas notas hablaremos más del tema. Por el momento te animamos a que veas nuestro curso de Excel Y el curso de php

 
Agregar esta página a Mister Wong Compartir
Propiedades de las clases en kotlin
Qué son las funciones en kotlin
Declaraciones condicionales en kotlin
Inferencia de tipo en kotlin
Declaración de variables en kotlin
  Comentarios: 0      
 
Enviá tu comentario
Para dejar tu comentario debes ser miembro de Sintagmas.
 
 
 
 
 
 
ULTIMAS PUBLICADAS en Internet |
  Agregar javascript en wordpress
Xnechijli01
 
  Plugin para wordpress
Xnechijli01
 
  Paso 3 y 4 para el código de javascript en wordpress
Xnechijli01
 
  Un plugin para wordpress
Xnechijli01
 
  Qué es el procesador de hipertexto
Xnechijli01
 
  Php y el desarrollo web
Xnechijli01
 
  Simplicidad en el desarrollo web con php
Xnechijli01
 
  Introducción a javascript
Xnechijli01
 
  Javascript para mostrar y ocultar elementos
Xnechijli01
 
  Código básico de javascript
Xnechijli01
 
  Principales marcos web de Python
Xnechijli01
 
  Ventajas de Python para el desarrollo web
Xnechijli01
 
  Internet para todas las cosas
Xnechijli01
 
  Python para el desarrollo web
Xnechijli01
 
  Qué son los inicios de sesión
Xnechijli01
 
  Informática en la nube
Xnechijli01
 
  Java lenguaje de programación por excelencia
Xnechijli01
 
  La barra de dirección del navegador y su función
Xnechijli01
 
  La importancia del diseño web en el marketing
Xnechijli01
 
  Algunos tipos de sitios web
Xnechijli01
 
  Algunos tipos de sitios web: parte 4
Xnechijli01
 
  Introducción al diseño web: Las páginas web
Xnechijli01
 
  Introducción al diseño web: Potocolos web
Xnechijli01
 
  El Haking etico el nuevo sistema de proteccion contra vulnerabilidades
aaragones
 
  Saca el jugo a los servicios de Onedrive
Contenidos7
 
  Una aplicación para reagrupar todas las nubes en un único lugar
Contenidos7
 
  Chrome OUT
Sociedaccion
 
  Diferencias entre onedrive para empresa y onedrive
Contenidos7
 
  Nuestros archivos de OneDrive en cualquier parte
Contenidos7
 
  Desaparece en Internet Explorer y otras acometidas de Windows 10
PosicionamientoURL
 
 
 
 
TAGS
JavaScript
 
 
  Contacto| Términos y condiciones| Anunciar en Sintagmas| Acerca de Sintagmas| Administrar|      
Copyright 2009 y actual de Sintagmas | Todos los derechos reservados