En JavaScript, podemos ocultar los elementos usando el estilo.display o utilizando el estilo.visibilidad . El visibilidad La propiedad en JavaScript también se usa para ocultar un elemento. La diferencia entre el estilo.display y estilo.visibilidad es cuando se usa visibilidad: oculta, la etiqueta no es visible, pero se asigna espacio. Usando pantalla: ninguna, la etiqueta tampoco es visible, pero no hay espacio asignado en la página.
En HTML podemos utilizar el oculto atributo para ocultar el elemento especificado. Cuando el oculto atributo en HTML se establece en verdadero, el elemento está oculto o cuando el valor es FALSO, el elemento es visible.
lógica de transferencia de registros
Sintaxis
La sintaxis general para ocultar un elemento usando estilo.oculto y estilo.visibilidad se da de la siguiente manera.
Usando estilo.oculto
document.getElementById('element').style.display = 'none';
Usando estilo.visibilidad
document.getElementById('element').style.visibility = 'none';
Ahora, veamos algunos ejemplos para entender el ocultamiento de elementos en javascript .
java reemplaza todo
Ejemplo 1
En este ejemplo, veremos cómo eliminar elementos utilizando JavaScript. estilo.display propiedad. Aquí hay un div elemento y un elemento de párrafo que se oculta al hacer clic en el elemento dado botón HTML . Tenemos que hacer clic en '¡Haz click en mi!' botón para ver el efecto.
style.display <h2> Using both style.visibility and style.display properties </h2> This is the div element. <p> This is a paragraph element. </p> <h3 id="heading"> This is the heading after the paragraph element. </h3> Click me! function fun() { document.getElementById('div').style.visibility = 'hidden'; document.getElementById('heading').style.display = 'none'; } Pruébalo ahora Producción
En la salida podemos ver que el div elemento (sobre el cual hemos aplicado estilo.visibilidad propiedad) se oculta pero aún asigna el espacio. Pero el título (en el que hemos aplicado estilo.display propiedad) se esconde y no asigna ningún espacio.
Después de hacer clic en el botón, el resultado será:
