Indagamos en diferentes foros y así tenerte la solución a tu inquietud, en caso de alguna difcultad puedes dejarnos la inquietud y responderemos con mucho gusto, porque estamos para servirte.
Solución:
Cómo mostrar u ocultar un elemento:
Para mostrar u ocultar un elemento, manipule la propiedad de estilo del elemento. En la mayoría de los casos, probablemente solo desee cambiar la display propiedad:
element.style.display = 'none'; // Hide
element.style.display = 'block'; // Show
element.style.display = 'inline'; // Show
element.style.display = 'inline-block'; // Show
Alternativamente, si aún desea que el elemento ocupe espacio (como si fuera a ocultar una celda de la tabla), puede cambiar el elemento visibility propiedad en su lugar:
element.style.visibility = 'hidden'; // Hide
element.style.visibility = 'visible'; // Show
Ocultar una colección de elementos:
Si desea ocultar una colección de elementos, simplemente iterar sobre cada elemento y cambiar el elemento display a none:
function hide (elements)
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++)
elements[index].style.display = 'none';
// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));
hide(document.querySelectorAll('.target'));
function hide (elements)
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++)
elements[index].style.display = 'none';
This div will be hidden.
This span will be hidden as well.Mostrando una colección de elementos:
La mayoría de las veces, probablemente solo alternará entre display: none y display: block, lo que significa que lo siguiente mayo será suficiente cuando se muestre una colección de elementos.
Opcionalmente, puede especificar el display como segundo argumento si no quiere que sea predeterminado block.
function show (elements, specifiedDisplay)
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++)
// Usage:
var elements = document.querySelectorAll('.target');
show(elements);
show(elements, 'inline-block'); // The second param allows you to specify a display value
var elements = document.querySelectorAll('.target');
show(elements, 'inline-block'); // The second param allows you to specify a display value
show(document.getElementById('hidden-input'));
function show (elements, specifiedDisplay)
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) 'block';
Inline span..
Alternativamente, un mejor enfoque para mostrar el (los) elemento (s) sería simplemente eliminar el display estilo para revertirlo a su estado inicial. Luego verifique el calculado display estilo del elemento para determinar si está oculto por una regla en cascada. Si es así, muestre el elemento.
function show (elements, specifiedDisplay)
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++)
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none')
element.style.display = specifiedDisplay
show(document.querySelectorAll('.target'));
function show (elements, specifiedDisplay)
var computedDisplay, element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++)
element = elements[index];
// Remove the element's inline display styling
element.style.display = '';
computedDisplay = window.getComputedStyle(element, null).getPropertyValue('display');
if (computedDisplay === 'none') 'block';
(Si desea ir un paso más allá, incluso podría imitar lo que hace jQuery y determinar el estilo del navegador predeterminado del elemento agregando el elemento a un espacio en blanco iframe (sin una hoja de estilo en conflicto) y luego recupere el estilo calculado. Al hacerlo, sabrá el true inicial display valor de propiedad del elemento y no tendrá que codificar un valor para obtener los resultados deseados).
Alternar la pantalla:
Del mismo modo, si desea alternar el display de un elemento o colección de elementos, simplemente puede iterar sobre cada elemento y determinar si es visible verificando el valor calculado de la display propiedad. Si es visible, configure el display a none, de lo contrario, elimine la línea display estilo, y si todavía está oculto, configure el display al valor especificado o al valor predeterminado codificado, block.
function toggle (elements, specifiedDisplay)
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++)
element = elements[index];
if (isElementHidden(element))
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element))
element.style.display = specifiedDisplay
else
element.style.display = 'none';
function isElementHidden (element)
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
// Usage:
document.getElementById('toggle-button').addEventListener('click', function ()
toggle(document.querySelectorAll('.target'));
);
document.getElementById('toggle-button').addEventListener('click', function ()
toggle(document.querySelectorAll('.target'));
);
function toggle (elements, specifiedDisplay)
var element, index;
elements = elements.length ? elements : [elements];
for (index = 0; index < elements.length; index++)
element = elements[index];
if (isElementHidden(element))
element.style.display = '';
// If the element is still hidden after removing the inline display
if (isElementHidden(element))
element.style.display = specifiedDisplay
else
element.style.display = 'none';
function isElementHidden (element)
return window.getComputedStyle(element, null).getPropertyValue('display') === 'none';
.target display: none;
Toggle the span.
Toggle the div.También puede utilizar el marco de JavaScript jQuery:
Para ocultar el bloque div
$(".divIDClass").hide();
Para mostrar Div Block
$(".divIDClass").show();
Simplemente puede manipular el estilo del div en cuestión ...
document.getElementById('target').style.display = 'none';