-
Cómo hacer que un botón sea visible en JavaScript
-
El modelo de objetos de documento JavaScript o DOM, permite a los desarrolladores Web localizar, acceder y manipular los atributos de objeto de página Web. Una vez JavaScript se utiliza para identificar correctamente una referencia de objeto, por lo general mediante el uso de su identificador, puede modificar los atributos de visibilidad, atributos de tamaño, atributos de fuente y más. JavaScript no se limita a la modificación de uno de los objetos; mediante el uso de hojas de estilo en cascada y el DOM de JavaScript, los desarrolladores pueden modificar las páginas web completos sobre la marcha, la creación de páginas web dinámicas que responden a una amplia variedad de interacciones del usuario.Instrucciones
1 Abra un editor de texto y crear un nuevo archivo con el nombre showButton.html. El proceso típico para crear un nuevo archivo en un editor de texto es seleccionar "Nuevo" del menú "Archivo".
2 Añadir las siguientes etiquetas HTML para showButton.html: "<html>", "<head>", "</ head>", "<body>", "</ body>" y "</ html>". En conjunto, estas etiquetas comprenden una página Web básica.
<Html>
<Head> </ head>
<Body> </ body>
</ Html>3 Añadir una etiqueta "<input>" para showButton.html, la colocación de la etiqueta entre el "<body>" y "</ body>" etiquetas. Dar la etiqueta de entrada un atributo "tipo" "enviar", un atributo "id" "invisiButton", un "valor" atributo "Estoy visibles" y un "estilo" "visibility: hidden" atributo.
<Input type = "submit" id = valor "invisiButton" = "yo soy visible" style = "visibility: hidden;">
4 Añadir una segunda etiqueta "<input>" para showButton.html inmediatamente después de la primera etiqueta "<input>". Dar a esta etiqueta de entrada un "tipo" atributo "enviar", un atributo "value" "Haga clic aquí para hacer el primer botón Visible", un atributo "id" "showButton" y el uso de un "onClick ()" JavaScript evento para llamar al función "visibleButton".
<Input type = "submit" value = "Haga clic para hacer visible el primer botón" id = "shownButton" onclick = "visibleButton ()">
5 Añadir un JavaScript "<script>" delimitador y una función JavaScript denominada "visibleButton" entre showButton.html de "<head>" y "</ head>" etiquetas. Sigue la declaración de la función con dos llaves ( "{}") para indicar la ubicación del código de la función. Cierre el JavaScript "</ script>" delimitador.
<Script type = "text / javascript">
visibleButton función () {}
</ Script>6 Declarar una variable llamada "buttonToShow" dentro de llaves de la función visibleButton. Utilice el método "getElemenById" JavaScript para recuperar el elemento con el id "invisiButton".
var buttonToShow = document.getElementById ( "invisiButton");
7 Establecer el estilo del elemento "buttonToShow" y los atributos de visibilidad en "visible". Después del paso 7, showButton.html aparecerá como se muestra a continuación. Guarde y cierre showButton.html.
<Html>
<Head>
<Script type = "text / javascript">
funcionar visibleButton () {
var buttonToShow = document.getElementById ( "invisiButton");
buttonToShow.style.visibility = "visible";
}
</ Script>
</ Head>
<Body>
<Input type = "submit" id = valor "invisiButton" = "yo soy visible" style = "visibility: hidden;">
<Input type = "submit" value = "Haga clic para hacer visible el primer botón" id = "shownButton" onclick = "visibleButton ()">
</ Body>
</ Html>8 showButton.html abierta en un navegador Web. Haga clic en "Haga clic para hacer visible el primer botón" botón y verificar si aparece el botón "invisiButton".
Consejos y advertencias
- Los elementos ocultos también se pueden hacer visibles a través del "display: block" atributo. A diferencia de la visibilidad: oculto, display: block no se mantiene el espacio de un elemento dentro de la disposición.
- La "visibilidad: oculto" la propiedad es en realidad una propiedad CSS. Hay cientos de propiedades que se pueden aplicar a los elementos de las páginas Web.
- grupos enteros de elementos de la página web se pueden ocultar y se muestran, lo que permite a los desarrolladores cambiar por completo los diseños sin necesidad de una actualización de la página.
- Ocultar y mostrar elementos en las páginas Web puede ser una distracción para los usuarios. Asegúrese de cambiar la visibilidad de un elemento sólo si tiene sentido hacerlo dentro del contexto de la disposición general de la página Web.
