Ver ❯
Herramientas SEO
Tamaño del resultado:
668 x 574
×
Cambiar Orientacion
Cambiar tema, Oscuro/Luz
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>display: none vs visibility: hidden Y tu, ¿cómo escondes las cosas?</title> <script src="https://tutorialesenlinea.descargarjuegos.org/engine/classes/min/index.php?g=general3"></script> <script src="https://tutorialesenlinea.descargarjuegos.org/engine/classes/min/index.php?f=engine/classes/js/jqueryui3.js" type="text/javascript"></script> <script> $('#displayNone').click(function(e) { // Resetear, por si acaso has estado jugando con la otra propiedad $('#hide-me').css('visibility', 'visible'); if( $('#hide-me').is(":visible") ) { $('#hide-me').css('display', 'none'); } else { $('#hide-me').css('display', 'block'); } }); $('#visibilityHidden').click(function(e) { // Resetear, por si acaso has estado jugando con la otra propiedad $('#hide-me').css('display', 'block'); if( $('#hide-me').css('visibility') != 'hidden' ) { $('#hide-me').css('visibility', 'hidden'); } else { $('#hide-me').css('visibility', 'visible'); } }); </script> </head> <body> <style> body { background: #a64b00; color: #eee; font-family: verdana; } p { padding: 0; margin: 0 0 15px 0; font-size: 12px; width: 1000px; } #hide-me { width: 100px; height: 100px; background: #bf7130; display: block; padding: 10px; margin: 0 15px 0 0; font-size: 14px; font-weight: bold; float: left; text-align: center; background: rgba(0, 0, 0, .15); } </style> <div> <div id="hide-me">¿Me ves? </div> <p>Esconder/mostrar con <button id="displayNone">diplay: none / block</button> <button id="visibilityHidden">visibility: hidden / visible</button> </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vel scelerisque elit. Etiam facilisis risus ac elit eleifend facilisis. Mauris ut eleifend felis. Vestibulum lobortis a augue non viverra. Proin rutrum felis quis erat semper condimentum. Vestibulum quam nisl, commodo vitae metus ac, volutpat pellentesque mi. Fusce hendrerit sem eu dolor mattis, sit amet volutpat erat elementum. Nam eu enim sit amet purus volutpat mattis. Nunc sed adipiscing erat. Suspendisse sapien nisl, euismod at aliquet sed, scelerisque quis mauris. Nunc ac mattis lorem, ac semper urna. </p> <div> </body> </html>