-
Cómo establecer el ancho a través de CSS con JavaScript
-
En una página Web, las funciones de JavaScript pueden alterar las propiedades CSS de cualquier elemento HTML. Uso de JavaScript para establecer las propiedades CSS para adaptar el estilo de elementos de la página es común. Aprender cómo alterar el estilo a través de JavaScript en una página es una técnica útil para aprender principios como desarrollador o diseñador web, ya que ayuda a dar una idea clara de cómo los diversos elementos en una página web interactúan entre sí. Uso de JavaScript para aplicar reglas CSS requiere unos pocos pasos sencillos.
Instrucciones
1 Crear la página HTML. Si aún no dispone de una página, puede utilizar el siguiente esquema que define una página web básica:
<Html>
<Head>
</ Head>
<Body>
</ Body>
</ Html>
El código JavaScript se colocará en la sección de cabecera de la página, mientras que el contenido de la página va a estar dentro de la sección del cuerpo. Guarde el archivo con la extensión ".html".
2 Añadir el contenido de su página. Usted puede agregar cualquier elemento HTML que desee para la página entre la apertura y cierre de etiquetas del cuerpo. El siguiente ejemplo de código de marcado crea tres elementos básicos:
<Div id = "header"> Cabecera de la sección </ div>
<Div class = "principal"> sección de contenido principal </ div>
<Div class = "principal"> Contenido principal sección 2 </ div>
El primer elemento se le ha asignado un atributo ID, mientras que el segundo dos tienen un atributo de clase. Estos pueden ser utilizadas para identificar los elementos a través de su código JavaScript para que luego se puede aplicar un estilo a ellos.
3 Añadir una sección JavaScript para su página. Entre la apertura y cierre de etiquetas de la cabeza en su página, añadir una sección de JavaScript de la siguiente manera:
<Script type = "text / javascript">
// funciones de JavaScript aquí
</ Script>
Entre la apertura y el cierre de las etiquetas de secuencia de comandos, se puede colocar cualquier función de JavaScript que necesita para su página. Añadir un contorno función como sigue:
setWidth función () {
// Código de función aquí
}
Esta es la sintaxis básica para cualquier función de JavaScript.
4 Utilice la función JavaScript para encontrar referencias a elementos de la página. Entre los soportes de función, agregue el código siguiente para localizar los dos tipos de elementos dentro de su página:
var headElem = document.getElementById ( "header");
mainElems var = document.getElementsByTagName ( "div");
La primera variable se encuentra el elemento de encabezado en la página utilizando su atributo ID, que identifica únicamente el. La segunda variable es el almacenamiento de elementos identificados mediante un nombre de etiqueta, lo que significa que puede haber más de uno en la página. Por esta razón, la segunda variable contiene una serie de elementos, todas con el nombre de la etiqueta especificada.
5 Aplicar propiedades de estilo para sus elementos. Usando el siguiente código, se aplica un ancho establecido para los elementos de su código JavaScript ha adquirido una referencia a:
headElem.style.width = "150px";
para (elem = 0; elem <mainElems.length; elem ++) {
si (mainElems [elem] .className == "principal")
mainElems [elem] .style.width = "120px"; }
Con la gran variedad de elementos, el mosto bucle de código JavaScript, a través de la comprobación del nombre de la clase de cada elemento antes de aplicar el estilo - de lo contrario la propiedad se aplicará a todos los elementos del tipo "div". Llame a su función de JavaScript mediante la modificación de su cuerpo de la etiqueta de la siguiente manera:
<Body onload = "setWidth ()">
Probar la página en un navegador.
Consejos y advertencias
- Puede usar el estilo impuesto por el JavaScript en conjunción con los archivos CSS independientes para la misma página.
- Si está utilizando JavaScript para definir propiedades de estilo para ciertos navegadores, recordar que no todos los usuarios tendrán que activar JavaScript.
