prucommercialre.com


Cómo cambiar los elementos HTML en JavaScript

El foco de la CSS está en el elemento HTML. CSS responde a la pregunta de cómo aparece una etiqueta <p> al espectador. Hay dos métodos de trabajo con los elementos HTML estáticamente: como parte de la etiqueta individual y dentro de una cabecera que define un estilo para todas las etiquetas del mismo tipo.

Ita € sa error de asumir que todos los navegadores muestran CSS precisamente lo mismo. Dos navegadores en el mismo sistema que ejecuta el mismo sistema operativo a menudo ofrecen ligeramente diferentes presentaciones. Además, ita € s un error pensar que un navegador proporcionará un aspecto coherente en todas las plataformas que soporta.

Por ejemplo, Firefox presenta ligeramente diferentes pantallas cuando se utiliza Mac OS X, Linux y Windows. Un navegador también puede mostrar la página de forma diferente cuando la demanda limitaciones del dispositivo. Una página que se muestra en una pantalla de teléfono inteligente difiere de la misma página se muestra en un PC. Piense en CSS como más de una directriz de un requisito absoluto.

Cómo trabajar con las etiquetas HTML

Una de las opciones para configurar las etiquetas HTML en una página es para agarrar todos los tags de un cierto tipo y formato como parte de un bucle. Thatâ € s lo que hace el siguiente ejemplo.

ChangeStyles función ()
{
// Modificar el <h1> estilo de etiqueta.
var Header = document.getElementsByTagName ("h1")
for (var i = 0; i <Header.length; i ++)
{
Encabezado [i] .style.fontFamily = "Arial";
Encabezado [i] .style.fontSize = "45px";
Encabezado [i] .style.fontWeight = "bold";
Encabezado [i] .style.color = "green";
Encabezado [i] .style.textAlign = "center";
Encabezado [i] .style.marginLeft = "20px";
Encabezado [i] .style.marginRight = "20px";
Encabezado [i] .style.border = "doble verde medio";
}

// Modificar el <p> estilo de etiqueta.
Para var = document.getElementsByTagName ("p");
for (var i = 0; i <Para.length; i ++)
{
Para [i] .style.fontFamily = "serif";
Para [i] .style.fontStyle = "italic";
Para [i] .style.fontSize = "1 em";
Para [i] .style.color = "blue";
}
}

En este caso, el ejemplo se utiliza getElementsByTagName () para obtener una matriz de todos los elementos de un tipo particular en una página. El ejemplo da formato a ambos los <h1> y <p> etiquetas en la página. Cuando usted tiene una lista de estos elementos, puede formatear cada elemento a su vez mediante el uso de un bucle for como se muestra. El ejemplo muestra una serie de tareas de formato comunes, incluyendo el establecimiento de márgenes de elementos.

Cuando es € re trabajando con adiciones gráficas, como una frontera, que ayuda a tener una comprensión de donde los diversos estilos encajan en el cuadro. Por ejemplo, el margen afecta a la distancia entre el borde de la pantalla y la frontera, y el relleno afecta a la distancia entre el borde y el contenido que encierra.

Usted debe notar algunas características de este ejemplo. Una propiedad fontFamily puede contener un nombre de familia, como Arial o un nombre genérico, como serif. El tamaño de fuente puede aparecer en píxeles (px) o el ccsme (una em es igual a 16 píxeles), entre otros tipos de valores. También puede utilizar las medidas relativas para el tamaño de fuente, tales como pequeñas.

Cómo cambiar los elementos HTML en JavaScript

¿Cómo trabajar con estilos de título

La mayoría de los desarrolladores están acostumbrados a trabajar con una etiqueta <style> que aparece en el elemento <head> de la página. JavaScript es capaz de construir una etiqueta <style> para usted mediante programación como se muestra en el siguiente ejemplo.

ChangeStyles función ()
{
// Obtener acceso a la cabecera.
Cabeza = document.getElementsByTagName ("cabeza") [0];

// Crear una etiqueta <style>.
StyleTag = document.createElement ("estilo");

// Establecer el <style> tipo de variable.
StyleTag.type = "text / css";

// Crear una variable para contener la información de estilo.
Estilos var =
"H1 {font-family: Arial; font-size: 45px;" +
"Font-weight: bold; colores: verde; text-align: center;" +
"Margin-left: 20px; margin-right: 20px;" +
"Border: medio doble verde;}" +
"P {font-family: serif; fuente-style: italic;" +
"Font-size: 1 em; color: blue}";

// Añadir el estilo a la etiqueta <style>.
StyleTag.appendChild (document.createTextNode (Styles));

// Añadir la etiqueta <style> al rubro.
Head.appendChild (StyleTag);
}

La diferencia en este ejemplo es que la información de formato aparece en la etiqueta <style> en lugar de con cada elemento individualmente. Para que este ejemplo funcione, que la construcción de la etiqueta <style> contenido de la etiqueta como una cadena.

La aplicación utiliza la función createTextNode () para convertir la cadena en un nodo de texto y lo inserta como contenido de la etiqueta <style>, StyleTag, utilizando appendChild (). Para agregar la etiqueta <style> en el elemento <head>, el código llama al appendChild () funciona por segunda vez.

¿Cómo trabajar con los ID

Para cambiar la apariencia de etiquetas específicas, debe trabajar con identificaciones específicas como se muestra en el siguiente ejemplo.

ChangeStyles función ()
{
// Modificar el <h1> estilo de etiqueta.
var Header = document.getElementById ("Header");
Header.style.fontFamily = "Arial";
Header.style.fontSize = "45px";
Header.style.fontWeight = "bold";
Header.style.color = "green";
Header.style.textAlign = "center";
Header.style.marginLeft = "20px";
Header.style.marginRight = "20px";
Header.style.border = "doble verde medio";

// Modificar el <p> estilo de etiqueta.
Para var = document.getElementById ("Párrafo");
Para.style.fontFamily = "serif";
Para.style.fontStyle = "italic";
Para.style.fontSize = "1 em";
Para.style.color = "blue";
}

En este caso, sólo los elementos con los identificadores específicos previstos por el código a la función getElementById () se modifican en apariencia. Por ejemplo, cuando el código llama document.getElementById ("Header"), encabezado recibe una referencia al objeto con un id de cabecera, y los cambios que siguen sólo afectan a ese objeto en particular. La salida es similar a los otros dos ejemplos, excepto el segundo párrafo se mantiene sin cambios.