Entendido.

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

Logo

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++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 295

Visitas el mes pasado: 278

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript
Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript
Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web
www.programacionweb.net
WebEstilo: JavaScript
www.webestilo.com
W3 schools; Javascript Tutorial
www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.
Jose Antonio Rodriguez: manual en PDF

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




5. Acceso al DOM (IV)

5.4 Atributos y código CSS

javascript

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:


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 la siguiente página veremos otras formas de acceder a algunos elementos, como los enlaces e imágenes.

Enlaces e imágenes.



manual de Javascript

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

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

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

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