-
Cómo cerrar un DIV en JavaScript
-
Cuando los navegadores web se cargan las páginas HTML, que generan una representación de la página en una estructura de árbol invertido que se puede manipular dinámicamente usando JavaScript. La página de manipulación de interfaz de usuario es manejado por elementos de las páginas de referencia asignando - ID o nombres - que se pueden identificar y modificar en respuesta a las interacciones del usuario, tales como botones de clicks. Este proceso permite a los desarrolladores web para abrir, cerrar, mover o eliminar elementos identificados, tales como secciones DIV, en respuesta a las interacciones del usuario.Instrucciones
1 Abra un editor de texto y crear un nuevo archivo de texto, por lo general mediante la opción "Nuevo" en el menú Archivo. Añadir algunas etiquetas HTML básicas para el archivo y el nombre del archivo closeDiv.html. Después del paso 1, closeDiv.html se verá como se muestra:
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Editar closeDiv.html mediante la adición de un elemento <script> y </ script> etiqueta para el código HTML. Coloque estas etiquetas entre las etiquetas <head> y </ head> y dar a la etiqueta <script> un atributo de tipo de text / javascript para indicar el idioma del guión. Después del paso 2, closeDiv.html se verá como se muestra:
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
3 Declarar una función de JavaScript entre las etiquetas <script> y </ script> etiquetas con nombre closeThisDiv () y después de la declaración con dos llaves - {y}. Después del paso 3, closeDiv.html se verá como se muestra:
<Html>
<Head>
<Script type = "text / javascript">
funcionar closeThisDiv ()
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Declarar una variable llamada openDiv entre llaves de apertura y cierre de la función. Utilice el método document.getElementById () para recuperar una referencia a la divName div, y asignar la referencia a la variable openDiv. Después del paso 4, createTable.html se verá como se muestra:
<Html>
<Head>
<Script type = "text / javascript">
funcionar closeThisDiv ()
{
var openDiv = document.getElementById ( 'divName');
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Establecer el estilo de visualización de la variable openDiv a "ninguno". Este estilo indica que el elemento DIV divName no se represente y se debe quitar de la estructura de formato. Después del paso 5, closeDiv.html se verá como se muestra:
<Html>
<Head>
<Script type = "text / javascript">
funcionar closeThisDiv ()
{
var openDiv = document.getElementById ( 'divName');
openDiv.style.display = 'none';
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
6 Añadir una etiqueta <div> entre <body> de closeDiv.html y etiquetas <body> y establezca el valor id de la etiqueta de "divName" (esto es la referencia de la etiqueta). Añadir el texto "Este texto está en un DIV" después de la etiqueta de apertura <div> y cerrar la etiqueta <div />. Después del paso 6, closeDiv.html se verá como se muestra:
<Html>
<Head>
<Script type = "text / javascript">
funcionar closeDiv ()
{
var openDiv = document.getElementById ( 'divName');
openDiv.style.display = 'none';
}
</ Script>
</ Head>
<Body>
<Div id = "divName">
Este texto está en el DIV
</ Div>
</ Body>
</ Html>
7 Añadir una etiqueta <botón> inmediatamente después de la etiqueta de cierre </ div>. Asignar un evento de clic al botón y establezca su valor en "javascript: closeDiv ()" para indicar que la función closeDiv () debe ser llamada cuando se hace clic en el botón. Darle al botón del texto "Haga clic para cerrar el DIV" y cerrar la etiqueta </ botón>. Después del paso 7, closeDiv.html se verá como se muestra:
<Html>
<Head>
<Script type = "text / javascript">
funcionar closeThisDiv ()
{
var openDiv = document.getElementById ( 'divName');
openDiv.style.display = 'none';}
</ Script>
</ Head>
<Body>
<Div id = "divName">
Este texto está en el DIV
</ Div>
<Botón onclick = "javascript: closeThisDiv ();"> Haga clic para cerrar el DIV </ botón>
</ Body>
</ Html>
8 closeDiv.html abierta en un navegador Web. Haga clic en el botón "Haga clic para cerrar el DIV" para cerrar la etiqueta div divName.
Consejos y advertencias
- Los valores de ID (de referencia) asignados a los elementos con el fin de manipular el diseño de una página pueden ser de estilo utilizando hojas de estilo en cascada.
- Los bloques pueden ser de estilo utilizando diversos valores de la propiedad, entre ellos ninguno, bloque, en línea, una lista de items y otros.
- El valor de la pantalla por defecto está en línea, por lo que si se da ningún valor para la pantalla, se generará un bloque en línea sin saltos de línea antes o después del elemento.
- Una muestra de ninguno crea ningún bloque en absoluto, o elimina el bloque de la pantalla. No tiene el bloque invisible.
