Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de Javascript

Javascript: lenguaje interactivo para dinamizar la web.

Y ahora tambien aprende a programar en C++ con Aprende Web C++

Manuales para la creación y diseño de páginas web

RSS. Suscribir canal.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

5. Acceso al DOM (IV)

5.4 Atributos y código CSS

Acceso a atributos.

Para acceder a los atributos de una etiqueta, debemos acceder primero al nodo que contiene la etiqueta. Una vez que hemos accedido al nodo, para acceder al atributo simplemente se indica su nombre después del nodo, separado por un punto; ya que los atributos son considerados como propiedades del nodo. Ejemplo: para acceder al sitio al que apunta un enlace (atributo href):

direccion = document.getElementsByTagName("a")[0].href

En este ejemplo dirección será la direccion URL a la que apunta el primer enlace de la página, ya que el valor que se devuelve es el valor del atributo.

En el ejemplo anterior hemos leido el valor de un atributo, pero tambien podemos modificarlo, para ello no tenemos más que asignarle un nuevo valor. ejemplo:

document.getElementsByTagName("a")[0].href = "http://es.yahoo.com/"

Ahora el primer enlace de la página apunta hacia el nuevo sitio.

También podemos leer y escribir los atributos mediante los métodos getAttribute(" "), para lectura; y setAttribute(" "," ") para escritura. Dentro del paréntesis, y entre comillas, escribiremos para getAttribute(" "), el nombre del atributo; y para setAttribute(" "," "), en primer lugar escribiremos el nombre del atributo, y en segundo lugar, el nuevo valor del atributo.

El mismo ejemplo anterior, usando estos dos métodos quedaría de la manera siguiente: lectura mediante getAttribute

elemento = document.getElementsByTagName("a")[0]
direccion = elemento.getAttribute("href")

La escritura mediante setAttribute es la siguiente:

elemento = document.getElementsByTagName("a")[0]
elemento.setAttribute("href","http://es.yahoo.com/")

Mediante la escritura no sólo se puede cambiar el valor de un atributo, sino que se pueden añadir nuevos atriibutos a las etiquetas. Simplemente hacemos la escritura del atributo, si la etiqueta ya lo tenía, éste reemplaza su valor, y si no lo tenía, se le añade como nuevo con el valor indicado.

Por último decir que el atributo class cambia de nombre cuando hay que utilizarlo en javascript, y pasa a llamarse className, ya que la palabra class es palabra reservada en javascript.

Acceso a las propiedades CSS

Para acceder a las propiedades CSS primero debemos acceder a la etiqueta a la que queremos leer, modificar, o añadir una propiedad. Escribimos luego la palabra .style (precedida de un punto) y después el nombre de la propiedad (también precedida de un punto).

Los nombres de las propiedades varían ligeramente, Las propiedades que constan de más de una palabra (en CSS varias palabras separadas por guiones), pasan a escribirse sin guiones, y con la primera letra de la segunda palabra y siguientes en mayúscula. Así por ejemplo font-family pasa a llamarse fontFamily; border-right-color pasaría a ser borderRightColor, y así con las demás propiedades con más de una palabra.

En el siguiente ejemplo se accede a la propiedad text-align para ver qué alineación tiene determinado texto:

elemento = document.getElementById("elemento1")
alineacion= elemento.style.textAlign

En este ejemplo la variable alineación recoge el valor de la propiedad text-align en ese elemento.

Pero si lo que queremos es modificar el valor de una propiedad, o añadir una propiedad nueva a un elemento, lo que debemos de hacer es simplemente asignarsela:

elemento = document.getElementById("cambiar");
elemento.style.textAlign = "center"

Para pasarle el nuevo valor debemos escribirlo entre comillas o pasarlo en una variable de texto que contenga su nombre. Si el elemento tenía ya un valor para esa propiedad CSS, este se cambiará; si no tenía ninguno, al elemento se le añade la propiedad CSS con el valor que se le ha pasado.

El acceso a las propiedades CSS con javascript es una de las claves fundamentales para programar una página dinámica, ya que permite cambiar completamente el aspecto visual de la página. Cuando cambiamos las propiedades CSS, sobre todo si usamos eventos que interactuan con el usuario, y le permiten controlar los cambios, entre otras cosas podemos hacer:

• Cambiar el aspecto de los textos: tamaño, color, fuente, alineación, estilo, etc.
• Cambiar colores e imágenes de fondo.
• Cambiar bordes o márgenes de los elementos de la página.
• Cambiar el aspecto de las listas o tablas que aparecen en la página.
• Cambiar el tamañó de algunas cajas o cuadros, o imágenes, o cambiarlos de sitio (propiedades width, height, position).
• Hacer aparecer o desaparecer algunos elementos (propiedades display o visibility),

Página de ejemplo

Como es habitual incluiremos una página de ejemplo en la que cambiaremos la dirección de un enlace, y algunas propiedades CSS de algunos elementos. Este es su código fuente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
   <title>Prueba 5</title> 
<style type="text/css">
   h2  { width: 250px; float: left; padding-left: 3em ; font-family: arial; }
   #limpiar { clear: both; }
   p, a { font: bold 1.2em arial; text-decoration: none; }
</style>
<script type="text/javascript">
  var urls = ["http://www.google.com","http://yahoo.es","http://es.wikipedia.org"];
  function direccion(num) {
         var enlace = document.getElementById("enlace");
         enlace.href = urls[num];
         for (i in urls){
             document.getElementsByTagName("h2")[i].style.color = "black";
             document.getElementsByTagName("h2")[i].style.fontFamily = "arial";
             }
         document.getElementsByTagName("h2")[num].style.color = "red";
         document.getElementsByTagName("h2")[num].style.fontFamily = "Verdana";
         }
</script>
</head>
<body>
  <h1>Acceso a atributos y código CSS</h1>
  <p>El siguiente enlace puede apuntar a alguno de estos sitios: Haz clic primero 
    en el sitio al que quieras ir (éste cambiará de aspecto) y luego en el enlace. 
    El enlace se abrirá en una página aparte.</p>
  <h2 id="direccion1" onclick="direccion(0)">Google</h2>
  <h2 id="direccion2" onclick="direccion(1)">Yahoo</h2>
  <h2 id="direccion3" onclick="direccion(2)">Wikipedia</h2>
  <p id="limpiar"></p>
  <a id="enlace" href="#" target="_blank">Enlace multidireccional</a>
</body>
</html>

En el siguiente enlace se muestra como queda esta página:

Acceso a atributos y propiedades CSS

Veamos los pasos seguidos para crear el código javascript de esta página:

• En primer lugar creamos el array que contiene las direcciones a las que va a apuntar el enlace.
• Creamos después la funcion que va poder cambiar el contenido del enlace, esta función también va a permitir cambiar el aspecto del nombre de referencia del enlace. para ello en cada una de las etiquetas de referencia se hace una llamada a la función (atributo onclick, y en el paréntesis se escribe el numero de orden de la direccion, según el array.
• Dentro de la función accedemos al enlace, y le añadimos el atributo que le corresponde según el número : enlace.href = urls[num].
• Las siguientes sentencias cambian el aspecto de las etiquetas h2, para ello, en primer lugar, en un bucle restauramos las propiedades CSS iniciales que tienen estas etiquetas, y fuera del bucle cambiamos las propiedades de la etiqueta sobre la que hemos pulsado. Lo de restaurar las propiedades en un bucle es porque si pulsamos más de una etiqueta, al pulsar la segunda, la anterior quedará como estaba antes, de manera que sólo tengamos una etiqueta destacada.

En la siguiente página veremos otras formas de acceder a algunos elementos, como los enlaces e imágenes.

Enlaces e imágenes.

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com