En HTML podemos mostrar u ocultar elementos de diversas formas. Podemos usar el atributo hidden de HTML o también podemos usar las propiedades CSS display o visibility, que esconderán o mostrarán elementos en función de su valor.
Atributo Hidden de HTML
Los elementos HTML son visibles por defecto salvo que el atributo hidden esté presente en una etiqueta, en cuyo caso se ocultará en el documento:
<div hidden></div>Puedes consultar más detalles acerca el atributo hidden aquí.
Propiedad Display de CSS
Otro método mediante el cual podemos mostrar u ocultar elementos de un documentos HTML consiste en dar el valor none a la propiedad CSS display, que esconderá el elemento en el documento, aunque siga presente en el DOM, tal y como vemos en este ejemplo:
<div id="elemento" style="display:none;"></div>Si la propiedad display tiene cualquier otro valor, como por ejemplo inline, block, inline-block, flex, grid o table, entre otros, el elemento se mostrará.
Resulta muy habitual mostrar u ocultar elementos dinámicamente mediante JavaScript.
Si por ejemplo queremos mostrar el div anterior mediante JavaScript:
document.getElementById("element").style.display = "block";En caso de querer ocultarlo mediante JavaScript:
document.getElementById("element").style.display = "none";Si usas jQuery, también puedes usar el método hide() para ocultar un elemento o el método show() para mostrarlo.
Por ejemplo si quieres mostrar el div anterior usando jQuery:
$('#elemento').hide()En caso de querer ocultarlo:
$('#elemento').show()Propiedad Visibility de CSS
Finalmente, también es posible ocultar o mostrar elementos HTML mediante la propiedad CSS visibility. A diferencia de la propiedad display, cuando ocultamos elementos mediante la propiedad visibility, el espacio que ocupaban se mantendrá en el documento.
Para ocultar un elemento HTML usando la propiedad visibility, debemos establecer su valor como hidden o como collapse:
<div id="elemento" style="visibility:hidden;"></div>Si queremos ocultar el div anterior, podemos modificar la propiedad visibility mediante JavaScript:
document.getElementById("element").style.visibility = 'hidden';En caso de querer mostrarlo usando JavaScript:
document.getElementById("element").style.visibility = 'visible';En este, caso, jQuery no dispone de métodos específicos para modificar la propiedad visibility, por lo que tendrás que modificar su valor tal y como lo harías para cualquier otra propiedad CSS. Por ejemplo, para hacer visible el div de nuestro ejemplo mediante jQuery:
$('#elemento').css("visibility", "visible");Si por el contrario quieres ocultar el div de nuestro ejemplo mediante jQuery:
$('#elemento').css("visibility", "hidden");
Edu Lázaro: Ingeniero técnico en informática, actualmente trabajo como desarrollador web y programador de videojuegos.
Gracias. Me resulto util.
Saludos
hola Edu, soy Luis, estoy programando hace muy poco tiempo una macro en e con código en módulo visual basic, con la que manejo una pagina web, utilizando IE, no se si tendrás el tiempo y conocimiento, como para ayudarme.
pero estoy desesperado y por mas que busco propiedades, métodos e instrucciones en internet, no logro resolver mi problema.
el tema es que necesito recorrer los elementos (div) de una pagina web, para lograr hacer click, en un item, dentro de un combobox.
la forma con la que logro hacerlo, en estado paso a paso de depuración es la siguiente:
Dim HTMLDoc As HTMLDocument
Dim oHTML_Element As Object
Set HTMLDoc = ie.document
Set oHTML_Element = ie.document.getElementsByTagName(«class»)
Dim itemEle As Object
For Each oHTML_Element In HTMLDoc.getElementsByTagName(«div»)
If oHTML_Element.getAttribute(«class») = «dijitReset dijitMenuItem» Then
If oHTML_Element.getAttribute(«item») = 1 Then
oHTML_Element.Click
Exit For
End If
End If
Next
– dijitPopup dijitComboBoxMenuPopup ***Nombre del menú desplegable del combobox cuyo código esta oculto y que contiene el div y la clase dijitReset dijitMenuItem que necesito***
– (1) ***numero de índice del item que quiero seleccionar***
como comente, de esa forma logro llegar al item que necesito y hacer click automático, pero eso, solo si intervengo haciendo click directamente sobre la flecha ▼ del combobox, porque descubrí, que el elemento div y la class (dijitPopup dijitComboBoxMenuPopup) no se muestran en el código HTML hasta que no se haga click en algún item del combobox.
hay alguna forma de recorrer los elementos que no están visibles dentro del código html o de hacer visible el código con alguna instrucción como por ejemplo:
las cuales en realidad no me funcionan :(
ie.document.getElementsByClassName(«dijitReset dijitMenu dijitComboBoxMenu»)(0).getAttribute(«visibility») = Visible
o
ie.document.getElementById(«dijitReset dijitMenu dijitComboBoxMenu»)(0).getAttribute(«visibility») = Visible
quedo atento a tus comentarios, de antemano gracias Edu
Sería un poco complicado obtener su consulta solo con JavaScript, te recomendaría que uses jQuery, que a diferencia de la primera te permite iterar con cada elemento dentro de otro elemento de manera más intuitiva.
Necesitaba esta información en jQuery para pasar un módulo de mi curso, así que infinitamente agradecido con la información.
Muy bueno tu documento, claro y preciso, Agrdecido
Como puedo mostrar el mismo contenido de un .html en otro .html?
Muchas gracias, tenía un día entero luchando para poder encontrar una solución pero gracias a tu contenido pude resolverlo fácilmente, excelente trabajo!!
mil gracias por tomarte el tiempo de explicar, dos días tratando de hacer esto …….