-
Cómo cambiar la visibilidad DIV con JavaScript
-
JavaScript es un lenguaje de script del lado del cliente que puede ser utilizado para crear páginas web dinámicas que respondan a las acciones del usuario. Por ejemplo, los usuarios interactúan con las páginas web haciendo clic en los botones, abrir páginas o moviendo el cursor del ratón sobre los elementos de la página web. Estas interacciones desencadenan eventos como "onclick", "onload" o "onmouseover" que pueden, a su vez, activar las funciones de JavaScript. Las funciones se utilizan los métodos incorporados de JavaScript, como las "getElemenById," para cambiar la visibilidad estilo de elementos de páginas web, como texto colocados en las etiquetas "div".Instrucciones
1 Abra un editor de texto y crear un nuevo archivo con el nombre divVisibility.html. Añadir etiquetas HTML para el archivo que incluye un proceso abierto "<html>" etiqueta, una etiqueta abierta "<head>", una etiqueta de cierre "</ head>", un "<body>" etiqueta abierta, un cierre "</ body> "etiqueta, y un cierre" etiqueta </ html> ".
<Html>
<Head> </ head>
<Body> </ body>
</ Html>
2 Añadir una etiqueta "<script>" entre la "<head>" y el "</ head>" etiquetas, defina <script> tipo de atributo de la etiqueta de "text / javascript" y cerrar la etiqueta "</ script>".
<Html>
<Head>
<Script type = "text / javascript">
</ Script>
</ Head>
<Body> </ body>
</ Html>
3 Añadir una función llamada "getStyle" entre la "<script>" y "etiquetas </ script>". Esta función toma un argumento: una variable llamada "visibilidad". Añadir una llave de apertura ( "{") y una llave de cierre ( "}") después de la declaración de la función para indicar dónde colocar el "getStyle" código de función.
<Html>
<Head>
<Script type = "text / javascript">
función getStyle (visibilidad)
{
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
4 Agregar un comando entre llaves de la función "getStyle" que utiliza el comando "getElemenById" JavaScript. Este comando establece el "style.visibility" atributo de un <div> con el identificador "myField" al valor de la "visibilidad" de argumentos variable.
<Html>
<Head>
<Script type = "text / javascript">
función getStyle (visibilidad)
{
. Document.getElementById ( "myField") style.visibility = visibilidad;
}
</ Script>
</ Head>
<Body> </ body>
</ Html>
5 Añadir una etiqueta "<div>" entre el archivo "<body>" y "</ body>" etiquetas y dar a la etiqueta de la id "myField". Añadir el texto "ocultar y mostrar DIV" después de la etiqueta "<div>" y cerrar la etiqueta "</ div>".
<Html>
<Head>
<Script type = "text / javascript">
función getStyle (visibilidad)
{
. Document.getElementById ( "myField") style.visibility = visibilidad;
}
</ Script>
</ Head>
<Body>
<Div id = "myField"> ocultar y mostrar DIV </ div>
</ Body>
</ Html>
6 Añadir un botón después de la etiqueta de cierre "</ div>". Asignar una "onClick ()" evento de JavaScript al botón que llama a la función "getStyle ()" con el argumento "visible". Asignar el texto "Haga la etiqueta DIV visible" para el botón y cerrar la etiqueta "</ botón>".
<Html>
<Head>
<Script type = "text / javascript">
función getStyle (visibilidad)
{
. Document.getElementById ( "myField") style.visibility = visibilidad;
}
</ Script>
</ Head>
<Body>
<Div id = "myField"> ocultar y mostrar DIV </ div>
<Botón onclick = getStyle ( "visible")> Hacer la etiqueta DIV botón </> visibles
</ Body>
</ Html>
7 Añadir una segunda etiqueta de botón para el archivo. Asignar una "onClick ()" evento de JavaScript al botón que llama a la función "getStyle" con el argumento "oculta". Asignar el texto "Haga la etiqueta DIV invisible" para el botón y cerrar la etiqueta "</ botón>". Guarde y cierre divVisibility.html.
<Html>
<Head>
<Script type = "text / javascript">
función getStyle (visibilidad)
{
. Document.getElementById ( "myField") style.visibility = visibilidad;
}
</ Script>
</ Head>
<Body>
<Div id = "myField"> ocultar y mostrar DIV </ div>
<Botón onclick = getStyle ( "visible")> Hacer la etiqueta DIV botón </> visibles
<Botón onclick = getStyle ( "oculto")> Hacer la etiqueta DIV invisible </ botón>
</ Body>
</ Html>
8 divVisibility abierta en un navegador web. Haga clic en el botón "Realizar la etiqueta DIV visible" para mostrar el texto entre el "myfield" "<div>" y "etiquetas" </ div>. Haga clic en el "Hacer que el botón invisible etiqueta DIV para ocultar el texto entre el" myField "" <div> "y" </ div> "etiquetas.
Consejos y advertencias
- Texto que se muestra en las etiquetas DIV HTML se puede ocultar o mostrar utilizando estilos CSS creados usando hojas de estilo.
- Es una buena práctica para verificar código dinámico, eventos y métodos en diferentes navegadores web para asegurarse de que el código funciona constantemente.
- El "<DIV>" etiqueta HTML puede tomar ventaja de muchos estilos CSS que proporcionan interfaces de usuario más atractivas.
- Considere el uso de un "retorno" al final de cualquier función que no devuelve un valor para asegurar las obras de función como se esperaba.
