Ver índice
Cambios de aspecto de una página

        Ocultar índice  

   Índice de contenidos
   Instalación en Windows
   Instalación en Ubuntu
   Servidores seguros
   Páginas dinámicas
   Sintaxis básica
   Operaciones
   Arrays
   Formatos de presentación
   Operadores
   Bucles
   Extraer y ord. información
   Funciones
   Ficheros externos
   Imágenes dinámicas
   Gestión de directorios
   Cookies y sesiones
   Clases y objetos
   Ficheros en formato PDF
   Bases de datos MySQL
   PHP y XML
   PDO - Bases SQLite / MySQL
   MySQL a traves de misqli
   Algo de JavaScript y AJAX


Modificación de los contenidos de una página

Cuando se trata de modificar parcialmente los contenidos de una página tenemos dos posibilidades. La más «cutre» seguramente sería cargar nuevamente toda la página después de haber realizado las modificaciones requeridas en el servidor. En este supuesto seguiríamos moviéndonos en el entorno de los lenguajes del lado del servidor, es decir, en el entorno de PHP.

La solución más óptima, pensando siempre en modificaciones parciales, sería mantener todo el contenido no modificble y realizar únicamente los cambios en los elementos de que los requieran. De esa forma, además de lograr una continuidad gráfica en la pantalla estaríamos reduciendo el tiempo de ejecución de eso cambios. En este segundo supuesto será necesario el concurso de un lenguaje del lado del cliente que permita ejecutar aquellas modificaciones que sean susceptibles de hacerse en modo local y/o recabar del servidor datos concretos que pueden ser requeridos. Trataremos el asunto en el entorno de JavaScript complementándolo cuando sea necesario con AJAX (Asynchronous JavaScript And XML) y accediendo al los datos del servidor mediante el objeto XMLHttpRequest soportado e incluido en la mayoría de los navegadores actuales.

Elementos con nombre

Sin meterme en grandes profundidades del JavaScript ni de los llamados DOM (Document Object Model) y BOM (Browser Object Model) vamos a intentar encontrar algunas recetas prácticas que nos permitan identificar indubitativamente los elementos de un documento. Consideremos el documento con una familia numerosa en la que conviven una cantidad inusual de hijos. En el ámbito familiar la solución es fácil. Para cada hijo se elige un nombre del agrado de sus progenitores con las restricciones establecidas en el artículo 54 de la Ley del Registro Civil (español) que establece que «No puede imponerse al nacido el mismo nombre que ostente uno de sus hermanos...».

Con un criterio similar podremos «bautizar» los diferentes elementos de un documento. Para ello bastaría con incluir en las etiquetas del lenguaje HTML algo como esto: id="nombre_unico". De esta forma podremos ya podremos llamar a cada cosa por su nombre, es decir, por su id aunque algunos elementos, body por ejemplo, al ser únicos no necesitan de ningún id.

En los ejemplos vamos a probar con varias de las etiquetas habituales en HTML tales como: <div>, <tr>, <td>, <li> o <img> y también con Los <OBJECT> de los tipos: img/gif, text/html o application/x-shockwave-flash así como con los diferentes elementos utilizados por los formularios. De esa forma podríamos crear una página como esta que puedes ver en el ejemplo

Ver página Ver código fuente

Como podrás observar hemos intentado incluir una pequeña miscelánea de elementos HTML utilizando estilos CSS en algunos casos. Las únicas novedades (si es que lo son para tí) son las nuevas formas de utilización la etiqueta <object> que parece tener una gran proyección futura ya que este tipo de elemento permite utilizar una sintaxis similar para los diferentes elementos.

Compatible con las mayoría de los navegadores modernos (la estandarización en términos absolutos me temo que es una gran utopía) y utilizando <object data="ruta_nombre_y_extension" type="tipo_mime">

De esta forma, <object id="foto_objeto" data="./images/bocadillo.gif" type="image/gif"></object>> nos permite incluir una imagen de forma alternativa a la clásica de: <img id="foto_objeto" src="./images/bocadillo.gif" />. De igual forma y tan sólo modificando el tipo de objeto hemos incluido una animación flash usando <object type="application/x-shockwave-flash" data="./videos/trubia.swf"> y también un sonido por medio de <object type="audio/x-wav" data="data/test.wav"></object> e incluso hemos podido utilizar, como opción alternativa al clásico IFRAME el objeto <object id="web" data="http://www.rinconastur.com" type="text/html"></object> ahora con tipo text/html.

Como quiera que existen una gran variedad de tipos MIME en este enlace tiene una «chuleta» en la que se incluyen una buena parte de las extensiones de ficheros existentes y los tipos MIME asociados.

  ¡Cuidado!  

He vuelto atrás para corregir el ejemplo anterior y a la vez advertirte de algo de relativa importancia. Parece que la estadarización es algo absolutamente imposible. Los quebraderos de cabeza son continuos y muchas veces nos obligan a recurrir a algunas chapuzas. Una de ellas sería tener la precaución de incluir dentro de una etiqueta div los object destinados a contener páginas web. Es decir, en vez de escribir algo como:
<object id="web" data="http://www.rinconastur.com" type="text/html"></object>
procura escribir esto:
<div id="chapuza_para_IE">
<object id="web" data="http://www.rinconastur.com" type="text/html"></object>
</div>
Puede parecer (o ser) ridículo pero no encontré una opción mejor para resolver un problema que se me planteó un poco más adelante. ¡Misterios de la informática! Me hizo recordar un «pseudodespido» del que fuí víctima hace ya unos cuantos años. ¡Tardé más de un mes en darme cuenta que en una opción de QuarkXpress no era lo mismo 90º que la suma algebraica (-90º+180º)!¡Misterios ...!

¿Cómo identifica JavaScript cada uno de los elementos?

Lo primero que tenemos que considerar es la forma en la que JavaScript identifica cada una de las partes de nuestra página web. Para JavaScript todo son objetos. Algo bastante parecido, al menos en el concepto, a lo que ocurría con los objetos PHP. Y como ocurría allí cada objeto pueden contener otros objetos y disponer de métodos y también de propiedades.

Cuandos se trata de documentos HMTL o XML tenemos que recurrir al DOM (Document Model Objects) –algo así como Objetos para la representación de Documentos– que puede sonar algo raro pero verás que, al menos en lo que vamos a necesitar, no resulta nada complicado una vez que le hayamos «cogido el tranquillo».

Hemos aprendido que cada vez que «abrimos el navegador» lo que estamos haciendo es «abrir una ventana» y como ventana en «raro» se escribe window pues ya tenemos un objeto Javascript, el objeto window que por decirlo de alguna manera es como el gran contenedor de todo lo demás. Dentro de window está todo lo demás. Los objetos que contiene, sus métodos y sus propiedades. En PHP la sintaxis era $objeto->metodo() o $objeto->propiedad. En el caso de JavaScript -> es sustituido por el caracter punto (.)

En este enlace tiene una página en la que por medio de un script de JavaScript puedes ver la información correspondiente al objeto window y a algunos de los objetos que contiene.

  ¡Cuidado!  

La normalización o estandarización parece ser una utopía en el mundo de los navegadores y el JavaScript. Si abres la página del párrafo anterior –aquí está el enlace– con distintos navegadores podrás observar que los resultados de pulsar sobre los enlaces que contiene son distintos en cada uno de ellas. Podrás ver, por ejemplo, que en Internet Explorer no van a aparecerte alusiones a los métodos que incluyen los objetos. También podrás observar que las propiedades, en incluso los objetos contenidos en cada uno de los objetos, no son exactamente los mismos. La compatibilidad entre los diferentes navegadores sigue requiriendo «auténtico encaje de bolillos». Quizá algún día... se normalizarán los navegadores.

Para nuestros fines uno de los objetos más importantes es window.document.body como todos los objetos JavaScript que vayamos manejando incluye una serie de propiedades y métodos que puedes ver enumeradas en el enlace de igual nombre que hay en este documento.

El objeto window.document.body incluye otro objeto llamado window.document.body.style cuyas propiedades son las diferentes opciones de estilos aplicables al body. ¿Cuales son esas propiedades? La lista es larga y bastante similar a la utilizada en las hojas de estilo pero ¡cuidado! que la sintaxis no es la misma. Por ejemplo lo que en CSS (las hojas de estilo en cascada) se define como background-color se corresponde con una propiedad del objeto style de JavaScript llamada backgroundColor. Para facilitarte las cosas en este enlace tienes la lista de las diferentes propiedades relacionadas con los estilos.

Veamos ahora un poco de código JavaScript relacionado con este asunto. En PHP el código lo delimitamos mediante <?php y ?>. En JavaScript es bastante similar aunque aquí se delimita por medio de las etiquetas <script type="text/javascript"> y </script>

El tratamiento de las propiedades de los objetos es similar al que usamos en PHP con la diferencia que las -> son reemplazadas aquí . y que, a diferencia de PHP hay una serie de objetos (body entre ellos) que no hace falta instanciar porque se crean de forma automática. Por tanto para modificar una propiedad bastaría con escribir algo así: window.document.body.style.backgroundColor="nuevo_color". Eso es lo que puedes ver en estos ejemplos. Pero fíjate en los dos primeros. También aquí el navegador hace una lectura secuencial del documento y si instanciamos un objeto que aún no ha sido creado (es lo que ocurre en el primer ejemplo) no habrá manera de que se modifique la pretendida propiedad.

<html>
   <head>
        <title>Pruebas del body</title>
        <script type="text/javascript">
            window.document.body.style.backgroundColor="#ffff00";
        </script>
    </head>
    <body>
        Te has precipidado. Me mandaste cambiar el color del body antes de que el body existiera.
    </body>
</html>
Ver ejemplo

<html>
   <head>
        <title>Pruebas del body</title>
    </head>
    <body>
    <script type="text/javascript">
            window.document.body.style.backgroundColor="#ffff00";
        </script>
        Ahora si me pondré amarillo. Las cosas en su sitio. Los javascript también.
    </body>
</html>
Ver ejemplo

Vamos un poco a «salto de mata» pero como todos los lenguajes tienen una gran similitud pienso que no resulta difícil de entender este nuevo ejemplo. También existen funciones en JavaScript, también la sintaxis es:

function nombre_de_la_funcion(){
....
... instrucciones ....
....
}

Como ocurre en PHP y en todos los demás lenguajes las funciones no se ejecutan hasta que no son invocadas (eso permite incluirlas en cualquier parte del documento) y también aquí se invocan escribiendo nombre_de_la_funcion(). Hay una diferencia (puedes verla en el ejemplo) y es que en el caso de JavaScript la ejecución de la función puede asociarse a un evento. Un evento no es otra cosa según la RAE que un acaecimiento, una cosa que sucede. Y ese es su significado. Cuando acaece que se carga el body de la página (onLoad) es cuando se ejecuta automáticamente la función.

<html>
   <head>
        <title>Pruebas del body</title>
        <script type="text/javascript">
            function cambia_fondo(){
                window.document.body.style.backgroundColor="#ffff00";
            }
        </script>
    </head>
    <body onLoad="cambia_fondo()">
         Ahora me es dicho: cuando cambies cargues el body (onLoad)
             ejecuta la función cambia_fondo. Soy obediente y lo hago
    </body>
</html>
Ver ejemplo

Los ejemplos anteriores aluden al objeto style contenido en body. Pero body tiene, además sus propiedades (algunas modificables otras no) que también se pueden acceder de forma fácil. Aquí tienes un ejemplo en el que hemos incluido una novedad. Ahora la función se ejecuta pulsando un enlace clásico en el que hemos sustituido el nombre de la nueva página (lo habitual en los enlaces) por esto otro: javascript:nombre_de_la_funcion(). Ahora, cuando pulsemos en el enlace se ejecutará la función.

Podrás ver como la función alert() abre una ventanita informativa sobradamente conocida en la que puede leerse el valor de lo contenido en su paréntesis.

<html>
<head>
  <title>Pruebas del body</title>
    <script type="text/javascript">
        function informame(){
            alert(window.document.body.clientWidth);
        }
 </script>
</head>
<body>
Si <a href="javascript:informame()">pulsas aquí</a> podrás conocer el ancho de esta ventana.
          Si modificas su tamaño y vuelves a pulsar verás que la medida cambia.
</body>
</html>
Ver ejemplo

La identificación de cada uno de los elementos de una página podría complicarse a medida que la página va incluyendo contenidos. JavaScript ha ido evolucionando a lo largo del tiempo. Los primeros navegadores con JavaScript permitían acceder sólo a ciertos tipos de objetos del contenido del documento que son conocidos como colecciones y que se identifican como document.anchors (anclas), document.forms (formularios), document.images (imágenes), document.links (enlaces), document.applets (applets) y document.embeds (objetos incrustados), estos dos últimos ya han caido en absoluto desuso.

Como quiera que en un mismo documento puede haber varios objetos de la misma colección (varias imágenes o varios formularios por poner un ejemplo) la forma de referirse a ellos era (y sigue siendo ya que los navegadores actuales mantienen esta forma de acceso a estos tipos de objetos) utilizar lo que en PHP llamaríamos un índice escalar de forma que sintaxis del tipo document.images[0] o document.images[4] harían alusión a la primera (empieza a numerar desde cero) y la quinta (por la misma razón) de las imágenes contenidas en el documento contadas, como se decía en lo créditos de las películas, por «orden de aparición».

También es factible aludir a los diferentes elementos por medio de id de modo que si en la etiqueta de una imagen incluimos algo como: <img id="la_foto" src="...." /> javaScript la identificará cuando escribamos document.images['la_foto'] (fíjate en las comillas que van dentro del corchete).

En este ejemplo tienes algunas muestras de como hacer estas llamadas.

Ver ejemplo Ver código fuente

Afortunadamente, nuestro ya famoso id pude suplir con creces las limitaciones de las colecciones. Será la referencia utilizaremos en adelante.

Bastará con que escribamos en JavaScript algo así como window.document.getElementById('identificador') para referirnos a el elemento HMTL cuya etiqueta de apertura incluya id="identificador". Para que JavaScript no tenga dudas bastará, tal como hemos comentado ya al principio de esta página, con que no repitamos los nombres de los identificadores a lo largo nuestro documento.

Igual que ocurría con body, cada uno de los objetos window.document.getElementById('identificador') contiene un objeto style al que nos podremos referir utilizando la sintaxis: window.document.getElementById('identificador').style

Si preferimos utilizar una sintaxis un poco menos farragosa podremos recurrir a objetos intermedios con denominaciones más fáciles. Por ejemplo:

var variable1= window.document.getElementById('identificador'); y var variable2=variable1.style
podríamos hacer alusión mediante la variable variable1 al objeto cuyo id es identificador y a sus estilos mediante variable2. Probablemente resultaría más cómodo y más corto.

Cambios de aspecto de los elementos de una página

Al comienzo de este documento hemos incluido un ejemplo en que utilizábamos una muestra de los diferentes elementos HTML asignándoles un nombre identificador creanod con ellos una página (hasta el momento estática).

A partir de ese documento con sus elementos identificados por medio de sus respectivos id ya estaremos en condiciones de recurrir a JavaScript para hacer cambios de forma autómatica. Pienso que una forma de hacerlo con determinado método sería clasificar los cambios en dos tipos: aspecto y contenido.

Empezamos por el aspecto lo primero de todo es decidir dónde hacer el cambio y, luego, ver que cambio pretendemos hacer. Al primero de los ejemplos de esta página le agregaremos una función JavaScript como esta:

<script type="text/javascript">
function cambia_aspecto(elemento, propiedad, valor){
        if (elemento=="body"){
            comando="document."+elemento+".style."+propiedad+"='"+valor+"'";
            eval(comando);
            alert("Se ha ejecutado:\n\r"+comando);
        }else{
            comando="document.getElementById('"+elemento+"').style."+propiedad+"='"+valor+"'";
            eval(comando);
            alert("Se ha ejecutado:\n\r"+comando);
        }
}
  </script>
  

Veamos su comportamiento. La llamada a la función incluye tres valores: elemento, propiedad y valor. Como elemento incluiremos el nombre del id cuya apariencia queremos modificar. Como propiedad pondremos el nombre de una de las propiedades de los objetos style que tenemos enumeradas en este enlace y como valor incluiremos una cadena con el nuevo valor que pretendamos asignar a la propiedad.

En cualquiera de las opciones del condicional if (fíjate que la sintaxis es idéntica a la de PHP con la diferencia de que en JavaScript los nombres de variable no empiezan por $) hay una variable llamada comando que concatena textos entrecomillados con valores de variables. Podrás observar que en este caso el concatenador no es el . como ocurría en PHP sino el signo +.

Con esa sintaxis la variable comando recogería cadenas tales como las que vas a poder leer al ejecutar el ejemplo. Una vez creada la variable ejemplo es necesario aplicarle la función JavaScript eval() que es quien realmente ejecuta la intrucción JavaScript contenida en la cadena comando.

Hemos incluido una llamada a la función alert para poder visualizar el comando ejecutado por javascript. Es evidente que resulta innecesario desde un punto de vista práctico. Por último quizá no esté de más aludir al condicional if. Cuando el objeto cuyo estilo que deseamos cambiar es body el objeto que recoge su estilo es: window.document.body.style cuando se trata de otros elementos que pueden no pertener a colecciones el objeto se identificaría de forma distinta ya que habría que recurrir a: window.document.getElementById('nombre_del_elemento').style. La variable elemento nos permitirá elegir uno u otro camino dependiendo del valor que contenga.

  ¡Cuidado!  

Cuando se trata de una misma ventana es indiferente utilizar la sintaxis window.document ó document. Habrá otras situaciones en las que será necesario tomar en consideración ese asunto.

Una vez incluida la función en el documento solo nos faltaría poner algún elemento que permita ejecutar esa función. En el ejemplo lo hemos hecho mediante los enlaces comentados anteriormente y cuya sintaxis podría ser similar a esta:

<a href="javascript:cambia_aspecto('capa1','width','300px');">Cambiar ancho de la capa</a>

De esta forma ya estaremos en condiciones de modificar el estilo de cualquier elemento de una página web tal como puedes comprobar en este ejemplo.

Ver ejemplo Ver código fuente

  ¡Cuidado!  

La compatibilidad entre navegadores parece ser algo así como la cuadratura del círculo. Si ejecutas el ejemplo anterior en Internet Explorer verás que si cambia el color de fondo del radio. En otros navegadores no ocurrirá lo mismo. Es cierto que la mayoría de las opciones de estilo son compatibles entre navegadores pero... siempre hay algún pero en algún lugar que rompe la racha de compatibilidad.

La sintaxis de la función anterior tiene una alternativa mucho más cómoda y simple que puedes visualizar aquí debajo:

function cambia_aspecto(elemento, propiedad, valor){
        if(elemento=='body'){
            window.document.body.style[propiedad]=valor;
        }else{
            window.document.getElementById(elemento).style[propiedad]=valor;
        }
}

Como verás se trata evitar la construcción de la cadena de texto (un poco liosa por aquello de concatenar textos y variables) y utilizar directamente la llamada al objeto escribiendo la variable identificadora dentro del paréntesis y colocando un corchete pegado a style para incluir la variable propiedad.

  ¡Cuidado!  

Fíjate que los nombres de las variables se incluyen sin comillas tanto en el paréntesis como en el corchete. Si prentendemos incluir valores directamente dentro de esos elementos (paréntesis y corchete) deberemos ponerlos entre comillas.

Como es lógico, el uso de una u otra función no altera para nada el resultado final. Aquí tienes la prueba.

Ver ejemplo Ver código fuente

Una alternativa más

Los objetos window.document.body.style y window.document.getElementById(nombre_del_elemento) disponen de otros métodos que también pueden utilizarse para realizar los cambios de diseño comentados anteriormente. Se trata de:

objeto.style.getAttribute('atributo')
y de:
objeto.style.setAttribute('atributo','valor')

el primero de los métodos nos devuelve una cadena conteniendo el valor actual de atributo mientras que el segundo nos permite efectuar modificar un atributo concreto

.
<script type="text/javascript">
/* funcion para comprobar los valores actuales de una propiedad */
function comprueba_aspecto(elemento, propiedad){
        if(elemento=='body'){
            alert(window.document.body.style.getAttribute(propiedad));
        }else{
            alert(window.document.getElementById(elemento).style.getAttribute(propiedad);
        }
}
/* funcion para cambiar los valores actuales de una propiedad */
function cambia_aspecto(elemento, propiedad, valor){
        if(elemento=='body'){
            window.document.body.style.setAttribute(propiedad,valor);
        }else{
            window.document.getElementById(elemento).style.setAttribute(propiedad,valor);
        }
}
</script>

Ver ejemplo Ver código fuente

Algunas consideraciones respecto al ejemplo anterior

Al ejecutar el ejemplo anterior podrás observar un par de cosas interesantes que conviene tener muy en cuenta.

Moficaciones masivas de aspecto

En todos los ejemplos comentados hasta ahora hemos aludido a modificaciones del aspecto de un elemento específico identificado por su window.document.ElementById('identificador'). No es la única opción. Pueden plantearse situaciones que requieran la modificación en bloque un conjunto de elementos. Una primera posibilidad podría ser la necesidad de todos los elementos de un tipo determinado (por ejemplo todos los elementos etiquetados como <td>, <li> o <div>) contenidos en una página.

Para este fin los objetos JavaScript disponen de un método muy interesante. Se trata de getElementsByTagName(etiqueta) que nos devuelve un objeto que contiene todos los elementos cuya etiqueta coincide con el parámetro etiqueta. El número de esos elementos puede conocerse por medio de la propiedad length de tal forma que una expresión del tipo getElementsByTagName(etiqueta).length nos devolvería el número de elementos definidos por medio de etiqueta

Para referirnos a un elemento concreto deberemos utilizar la sintaxis getElementsByTagName(etiqueta)[i] dónde el índice i es el número de orden de cada etiqueta, contado a partir de cero y recorriendo secuencialmente los contenidos de la página.

Cuando el nombre de la etiqueta se sustituye por un * el asterisco se interpreta como carácter comodín y en consecuencia se efectuará un recuento de todos los elementos o nodos de la página independientemente de cual sea su tag o etiqueta. Aquí tienes un ejemplo de una función JavaScript que realiza esos recuentos

<script type="text/javascript">
function recuenta(etiqueta){
                        /* en caso de que etiqueta sea nulo le asigna el valor del comodin * */
                        if ( etiqueta == null || etiqueta == ''){etiqueta = '*'};
                        /* el objeto elementos recogerá todos elementos
                           cuyo nombre coincide con la variable etiqueta*/
                        var elementos = document.getElementsByTagName(etiqueta);
                        /* la variable cadena recogerá un literal y el número de elementos
                           especificado por la propiedad elementos.length
                           Los carácteres '\n\r' son saltos de línea */
                        var cadena="Tengo "+elementos.length+'\n\r';
                        /* por medio de un bucle vamos añadiendo a la variable cadena los nombres
                           de cada uno de los elementos contenidos en el objeto elementos
                           e identificados por el subíndice que indica su orden de creación */
                        for (i=0;i<elementos.length;i++){
                         /* la propiedad tagName contiene el nombre del elemento */
                        cadena+=elementos[i].tagName+'\n\r';
                        }
                        /* visualizamos la cadena resultante de la consulta */
	                alert(cadena);
}
</script>

Si ejecutas este ejemplo y pulsas el enlace Recuenta todos los elementos podrás ver la enumeración ordenada de los nombres de cada uno de los elementos que contiene la página de ejemplo. Presta atención a las diferentes etiquetas que visualiza y observa que, por ejemplo, contempla TBODY pese a no haber sido especificado expresamente dentro de la etiquet TABLE.

Ver ejemplo Ver código fuente

La función anterior tiene su utilidad reducida a la enumeración de los diferentes elementos de una página pero puede ser el soporte de estas otras funciones que si permiten llevar a cabo las pretendidas modificaciones masivas de los elementos de una página.

 <script type="text/javascript">
 /* la funcion recibe tres valores. El nombre de la etiqueta que pretendemos modificar
    el atributo que queremos cambiar o agregar a esas etiquetas y el valor que se pretende
    asignar al atributo */
 function modifica(etiqueta,atributo,valor){
                         /* el condicional sustituye los valores nulos o vacios por el comodín */
                         if ( etiqueta == null || etiqueta == ''){etiqueta = '*'};
                         /* por comodidad creamos el objeto elementos que incluirá todos
                            todos los objetos cuya etiqueta coincida con ese parámetro*/
                         var elementos = document.getElementsByTagName(etiqueta);
                         /* por medio del bucle recorreremos secuencialmente cada uno de los
                            elementos y mediante el método setAttribute le aplicamos el nuevo valor
                            al atributo indicado */
                         for (i=0;i<elementos.length;i++){
                                 elementos[i].style.setAttribute(atributo,valor);
                         }

 }
 /* esta otra funcion es la alternativa ya comentada de modificación de una propiedad sin utilizar
    el método setAttribute. Cualquiera de las dos funciones producirá el mismo resultado */
 function modifica1(etiqueta,atributo,valor){
                         if ( etiqueta == null || etiqueta == ''){etiqueta = '*'};
                         var elementos = document.getElementsByTagName(etiqueta);
                         for (i=0;i<elementos.length;i++){
                                 elementos[i].style[atributo]=valor;
                         }

 }
 </script>
Ver ejemplo Ver código fuente

La utilización de hojas de estilo en cascada (CSS) lleva implícita la definición de diferentes clases de estilos que son aplicados a los diferentes elementos de las páginas incluyendo dentro de sus etiquetas el atributo class="nombre_de_la_clase".

Si en el ejemplo anterior hacíamos un modificación masiva de todas las etiquetas de un determinado tipo es posible que en momentos determinados tratemos de restringir esa modificación a las etiquetas de una clase determinada. Esta posibilidad es propiciada por la propiedad objeto.className que nos devolverá el nombre de la clase (si ha sido establecida) correspondiente a un objeto (etiqueta html) determinado. En caso de no haberse establecido esa propiedad tendrá valor null o cadena vacía.

Contemplar esta nueva posibilidad implicará readecuar las funciones del ejemplo anterior a este nuevo escenario.

<script type="text/javascript"> 
/* agregamos el nuevo parámetro clase a la función anterior */
function modifica(etiqueta,clase,atributo,valor){
    if ( etiqueta == null || etiqueta == ''){etiqueta = '*'};
    var elementos = document.getElementsByTagName(etiqueta);
    for (i=0;i<elementos.length;i++){
        /* establecemos la condición de que para modificar el atributo coincida la clase
           con el valor recibido en ese parámetro o que la función haya sido invocada
           asignándole a clase un valor nulo o una cadena vacia en cuyo caso afectaría a todos
           los elementos que no tuvieran una clase establecida*/
        if(elementos[i].className==clase || clase==null || clase==''){
                elementos[i].style[atributo]=valor;
        }
    }
}
/* igual que en el ejemplo precedente esta función es una alternativa a la anterior */
function modifica1(etiqueta,clase,atributo,valor){
    if ( etiqueta == null || etiqueta == ''){etiqueta = '*'};
    var elementos = document.getElementsByTagName(etiqueta);
    for (i=0;i<elementos.length;i++){
        if (elementos[i].className==clase || clase==null || clase==''){
            elementos[i].style[atributo]=valor;
        }
    }
}
</script>
Ver ejemplo Ver código fuente

Aun puede darse un poco más de versatilidad a la opción de llevar a cabo modificaciones masivas de estilos. En los ejemplos anteriores la búsqueda de etiquetas y/o clases la realizabamos en document, es decir, a lo largo de toda la página visualizada en la ventana actual. Es posible que en determinadas situaciones nos interese realizar la búsqueda y modificación sólo en una parte del documento. Esa posibilidad nos obligaría a llevar a cabo una nueva ampliación en la funciones modificadoras que hemos venido manejando en los ejemplos anteriores. Aquí tienes el código fuente.

<script type="text/javascript">
/* la funcion recibe ahora un quinto parámetro que hemos llamado contenedor*/
function modifica(contenedor,etiqueta,clase,atributo,valor){
    if ( etiqueta == null || etiqueta == ''){etiqueta = '*'};
    /* si el contenedor es null o vacio entendemos que nos referimos a todo el documento */
    if (contenedor==null || contenedor==''){
            var elementos = document.getElementsByTagName(etiqueta);
    }else{
            /*cuando el contenedor no es vacio entendemos que nos referimos al elemento de documento
              cuyo nombre identificador unico (id) es contenedor.
              La búsqueda de los elementos modificable la realizaremos dentro de esa parte del
              del documento (objeto cuya es etiqueta es etiqueta y contenidos dentro de un elemento
              cuyo id es el valor de la variable contenedor) */
            var elementos=document.getElementById(contenedor).getElementsByTagName(etiqueta);
    }
    for (i=0;i<elementos.length;i++){
            if(elementos[i].className==clase || clase==null || clase==''){
                elementos[i].style[atributo]=valor;
            }
    }
}
/* las modificaciones son idénticas a las descritas para la función anterior que, como siempre,
   es una opción alternativa a esta */
function modifica1(contenedor,etiqueta,clase,atributo,valor){
    if ( etiqueta == null || etiqueta == ''){etiqueta = '*'};
    if (contenedor==null || contenedor==''){
            var elementos = document.getElementsByTagName(etiqueta);
    }else{
            var elementos=document.getElementById(contenedor).getElementsByTagName(etiqueta);
    }
    for (i=0;i<elementos.length;i++){
            if (elementos[i].className==clase || clase==null || clase==''){
                    elementos[i].style[atributo]=valor;
            }
    }
}
</script>
Ver ejemplo Ver código fuente