mensaje - Mostrar/ocultar ''div'' usando JavaScript
ocultar mostrar div js (10)
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 propiedad de display del elemento:
element.style.display = ''none''; // Hide
element.style.display = ''block''; // Show
element.style.display = ''inline''; // Show
element.style.display = ''inline-block''; // Show
Alternativamente, si todavía desea que el elemento ocupe espacio (como si fuera a ocultar una celda de tabla), podría cambiar la propiedad de visibility del elemento 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 itere sobre cada elemento y cambie la display del elemento 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'';
}
}
<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>
Mostrando una colección de elementos:
La mayoría de las veces, probablemente solo esté alternando entre display: none y display: block , lo que significa que lo siguiente puede ser suficiente al mostrar una colección de elementos.
Opcionalmente, puede especificar la display deseada como segundo argumento si no desea que se block predeterminada.
function show (elements, specifiedDisplay) {
elements = elements.length ? elements : [elements];
for (var index = 0; index < elements.length; index++) {
elements[index].style.display = specifiedDisplay || ''block'';
}
}
// 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++) {
elements[index].style.display = specifiedDisplay || ''block'';
}
}
<div class="target" style="display: none">This hidden div should have a display of ''inline-block'' when it is shown.</div>
<span>Inline span..</span>
<input id="hidden-input" />
Alternativamente, un mejor enfoque para mostrar el elemento (s) sería simplemente eliminar el estilo de display en línea con el fin de revertirlo a su estado inicial. Luego, verifique el estilo de display calculado del elemento para determinar si está oculto por una regla en cascada. Si es así, entonces 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 || ''block'';
}
}
}
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'') {
element.style.display = specifiedDisplay || ''block'';
}
}
}
<span class="target" style="display: none">Should revert back to being inline.</span>
<span class="target" style="display: none">Inline as well.</span>
<div class="target" style="display: none">Should revert back to being block level.</div>
<span class="target" style="display: none">Should revert back to being inline.</span>
(Si quiere dar un paso más, podría incluso imitar lo que hace jQuery y determinar el estilo predeterminado del navegador del elemento al agregar el elemento a un iframe blanco (sin una hoja de estilo en conflicto) y luego recuperar el estilo calculado. sabrá el verdadero valor de la propiedad de display inicial del elemento y no tendrá que codificar un valor para obtener los resultados deseados).
Alternar la pantalla:
De manera similar, si desea alternar la display de un elemento o colección de elementos, simplemente puede iterar sobre cada elemento y determinar si es visible al verificar el valor calculado de la propiedad de display . Si está visible, configure la display como none ; de lo contrario, elimine el estilo de display línea, y si aún está oculto, configure la display con el valor especificado o el block codificado por defecto.
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 || ''block'';
}
} 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 || ''block'';
}
} else {
element.style.display = ''none'';
}
}
function isElementHidden (element) {
return window.getComputedStyle(element, null).getPropertyValue(''display'') === ''none'';
}
}
.target { display: none; }
<button id="toggle-button">Toggle display</button>
<span class="target">Toggle the span.</span>
<div class="target">Toggle the div.</div>
Para un sitio web que estoy haciendo, quiero cargar un div y ocultar otro, luego tener dos botones que alternarán las vistas entre el div usando JavaScript.
Este es mi código actual
<script type="text/javascript">
function replaceContentInContainer(target, source) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
function replaceContentInOtherContainer(replace_target, source){
document.getElementById(replace_target).innerHTML = document.getElementById(source).innerHTML;
}
</script>
HTML actual:
<html>
<button onClick="replaceContentInContainer(''target'', ''replace_target'')">View Portfolio</button>
<button onClick="replaceContentInOtherContainer(''replace_target'', ''target'')">View Results</button>
<div>
<span id="target">div1</span>
</div>
<div style="display:none">
<span id="replace_target">div2</span>
</div>
La segunda función que reemplaza a div2 no funciona, pero la primera sí lo está.
¡Encontré este código JavaScript simple muy útil!
#<script type="text/javascript">
function toggle_visibility(id)
{
var e = document.getElementById(id);
if ( e.style.display == ''block'' )
e.style.display = ''none'';
else
e.style.display = ''block'';
}
</script>
Establezca su HTML como
<div id="body" hidden="">
<h1>Numbers</h1>
</div>
<div id="body1" hidden="hidden">
Body 1
</div>
Y ahora establece el javascript como
function changeDiv()
{
document.getElementById(''body'').hidden = "hidden"; // hide body div tag
document.getElementById(''body1'').hidden = ""; // show body1 div tag
document.getElementById(''body1'').innerHTML = "If you can see this, JavaScript function worked";
// display text if JavaScript worked
}
Puedes Ocultar / Mostrar Div usando la función Js. muestra a continuación
<script>
function showDivAttid(){
if(Your Condition) {
document.getElementById("attid").style.display = ''inline'';
}
else
{
document.getElementById("attid").style.display = ''none'';
}
}
</script>
HTML -
<div id="attid" style="display:none;">Show/Hide this text</div>
Simplemente puedes manipular el estilo del div en cuestión ...
document.getElementById(''target'').style.display = ''none'';
También puede usar el marco jQuery JavaScript:
Para ocultar Div Block
$(".divIDClass").hide();
Para mostrar Div Block
$(".divIDClass").show();
Usando estilo:
<style type="text/css">
.hidden {
display: none;
{
.visible {
display: block;
}
</style>
Usar un controlador de eventos en JavaScript es mejor que el atributo onclick="" en HTML:
<button id="RenderPortfolio_Btn">View Portfolio</button>
<button id="RenderResults_Btn">View Results</button>
<div class="visible" id="portfolio">
<span>div1</span>
</div>
<div class"hidden" id="results">
<span>div2</span>
</div>
JavaScript:
<script type="text/javascript">
var portfolioDiv = document.getElementById(''portfolio'');
var resultsDiv = document.getElementById(''results'');
var portfolioBtn = document.getElementById(''RenderPortfolio_Btn'');
var resultsBtn = document.getElementById(''RenderResults_Btn'');
portfolioBtn.onclick = function() {
resultsDiv.setAttribute(''class'', ''hidden'');
portfolioDiv.setAttribute(''class'', ''visible'');
};
resultsBtn.onclick = function() {
portfolioDiv.setAttribute(''class'', ''hidden'');
resultsDiv.setAttribute(''class'', ''visible'');
};
</script>
jQuery puede ayudarte a manipular elementos DOM fácilmente!
Y la respuesta de Purescript, para las personas que usan Halógeno:
import CSS (display, displayNone)
import Halogen.HTML as HH
import Halogen.HTML.CSS as CSS
render state =
HH.div [ CSS.style $ display displayNone ] [ HH.text "Hi there!" ]
Si "inspecciona el elemento", verá algo como:
<div style="display: none">Hi there!</div>
pero nada se mostrará realmente en su pantalla, como se esperaba.
Just Simple Function Necesita implementar Show / hide ''div'' usando JavaScript
<a id="morelink" class="link-more" style="font-weight: bold; display: block;" onclick="this.style.display=''none''; document.getElementById(''states'').style.display=''block''; return false;">READ MORE</a>
<div id="states" style="display: block; line-height: 1.6em;">
text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here
<a class="link-less" style="font-weight: bold;" onclick="document.getElementById(''morelink'').style.display=''inline-block''; document.getElementById(''states'').style.display=''none''; return false;">LESS INFORMATION</a>
</div>
<script type="text/javascript">
function hide(){
document.getElementById(''id'').hidden = true;
}
function show(){
document.getElementById(''id'').hidden = false;
}
</script>