Botón Ocultar de JavaScript

1. Use la propiedad de visibilidad para ocultar el botón en JavaScript
2. Use la propiedad de visualización para ocultar el botón en JavaScript

En la publicación de hoy, aprenderemos a ocultar botones en JavaScript.

Use la propiedad de visibilidad para ocultar el botón en JavaScript

La propiedad CSS visibilidad muestra u oculta un elemento sin afectar el diseño de un documento.

Sintaxis:

visibility: hidden;

El cuadro del elemento es invisible pero afecta el diseño como de costumbre. Los descendientes del elemento son visibles si su visibilidad se establece en visible.

El uso de un valor de visibilidad “oculto” para un elemento lo elimina del árbol de accesibilidad. Como resultado, la tecnología del lector de pantalla ya no anuncia el elemento y todos sus elementos secundarios.

Los valores de visibilidad se alternan entre visible e invisible. Por lo tanto, uno de los valores iniciales o finales debe estar visible o no se puede realizar ninguna interpolación.

El valor se interpola como un paso discreto, asignando valores de función de tiempo entre 0 y 1 al punto final visible y otros valores de función de tiempo al punto final más cercano.

Puede encontrar más información sobre la propiedad en la documentación Visibilidad.

Tomemos un ejemplo de mostrar y ocultar el botón en JavaScript usando la propiedad visibilidad.

<input type="button" id="btn-1" value="Show" onClick="hideAction()" />
<input type="button" id="btn-2" value="Hide" onClick="hideAction()"/>

let hidden = false;

function hideAction() {
  hidden = !hidden;
  if (hidden) {
    document.getElementById('btn-1').style.visibility = 'hidden';
  } else {
    document.getElementById('btn-1').style.visibility = 'visible';
  }
}

Hemos definido dos botones en el ejemplo anterior. El primer botón se mostrará y ocultará según el valor del botón de alternar.

El segundo botón cambiará la visibilidad del botón anterior.

Ejecute el fragmento de código anterior en cualquier navegador que admita JavaScript; mostrará el siguiente resultado.

Producción:

Ocultar botón:

Use la propiedad de visualización para ocultar el botón en JavaScript

La propiedad display de CSS determina si un elemento se trata como un bloque o un elemento en línea y el diseño utilizado para sus elementos secundarios, por ejemplo, diseño B. Flow, Grid o Flex.

Sintaxis:

display: block;
display: none;

La propiedad Display especifica los tipos de visualización interior y exterior de un elemento. El tipo externo determina la participación de un elemento en el diseño de flujo; el tipo interior establece el diseño del niño.

Algunos valores de visualización están completamente definidos en sus especificaciones. Por ejemplo, lo que sucede cuando se declara display: flex se define en la especificación del modelo CSS flexbox.

Puede encontrar más información sobre la propiedad en la documentación de Display.

Tomemos un ejemplo de mostrar y ocultar el botón en JavaScript usando la propiedad display.

<input type="button" id="btn-3" value="Show" onClick="displayAction()" />
<input type="button" id="btn-4" value="Toggle" onClick="displayAction()"/>

function displayAction() {
  hidden = !hidden;
  if (hidden) {
    document.getElementById('btn-3').style.display = 'none';
  } else {
    document.getElementById('btn-3').style.display = 'block';
  }
}

Hemos definido dos botones en el ejemplo anterior. El primer botón se mostrará y ocultará según el valor del botón de alternar.

El segundo botón alternará la propiedad display del botón anterior.

Ejecute el fragmento de código anterior en cualquier navegador que admita JavaScript; mostrará el siguiente resultado.

Producción:

Demostración aquí