Javascript / element

Bienvenidos sean a este post, hoy hablaremos sobre el objeto llamado Element el cual nos provee de propiedades para poder manipular y definir los estilos de los elementos y sus contenidos.

Una de estas propiedades es style, el cual a su vez contiene un objeto llamado Styles que a su vez incluye propiedades para modificar los estilos de los elementos, si bien podemos usar los nombres de las propiedades de style de CSS, en Javascript tienen unos nombres diferentes, a continuacion veremos las propiedades mas utilizadas por Javascript:

• color, declara el color del contenido del elemento
• background, declara los estilos del fondo del elemento
• border, declara los estilos de borde del elemento
• margin, declara el margen del elemento
• padding, declara el relleno del elemento
• width, declara el ancho del elemento
• height, declara la altura del elemento
• visibility, determina si el elemento es visible o no
• display, define el tipo de caja usado para presentar el elemento
• position, define el tipo de posicionamiento para el elemento
• top, especifica la distancia entre el margen superior del elemento con respecto al margen superior del contenedor
• bottom, idem al anterior pero con los margenes inferiores
• left,, idem a los anteriores pero con los margenes izquierdos
• right, idem al anterior pero con los margenes derechos
• cssFloat, permite al elemento flotar de un lado al otro
• clear, recupera el flujo normal del documento, impidiendo que el elemento flote de izquierda a derecha
• overflow, define como se va mostrar el contenido que excede los limites del elemento
• zindex, define el indice que determina su posicion en el eje z
• font, declara los estilos de la fuente
• textAlign, alinea el texto dentro del elemento
• verticalAlign, alinea elementos inline verticalmente
• textDecoration, resalta el texto con una linea

Para poder aplicar algunas de estas propiedades necesitamos obtener el elemento, como vimos antes por medio de getElementById, y luego debemos usar la propiedad style con algunos de las antes comentadas, tomemos el caso del post anterior donde teniamos una imagen con el id foto, para modificar el estilo podemos usar el siguiente codigo:

var elemento = document.getElementById("foto");
elemento.style.width="1920px";
elemento.style.height="1080px";
elemento.style.border="0px";

Observen como primero creamos el elemento por medio de getElementById y luego modificamos las propiedades primero con style y luego las propiedades pertinentes, en este caso redefinimos el ancho (width), el alto (height) y el borde (border), como ven son muy similares a las propiedades de CSS pero en el objeto Styles son independientes de los estilos CSS asignados al documento, si intentamos leer una de estas propiedades pero aun no le hemos asignado ningun valor, la devolucion sera una cadena de caracteres vacia, pero para proveer informacion acerca del elemento los objetos Element incluyen propiedades adicionales, veamos un listado de las mas usadas:

• clientWidth, devuelve el ancho del elemento, incluido el relleno
• clientHeight, devuelve la altura del elemento, incluido el relleno
• offsetTop, devuelve el numero de pixels que se ha desplazado el elemento del margen superior del contenedor
• offsetLeft, idem al anterior pero desde el margen izquierdo del contenedor
• offsetWidth, devuelve el ancho del elemento, incluido el relleno y el borde
• offsetHeight, devuelve el alto del elemento, incluido el relleno y el borde
• scrollTop, devuelve el numero de pixels en los que el contenido del elemento se ha desplazado hacia arriba
• scrollLeft, idem al anterior pero desplazado hacia la izquierda
• scrollWidth, devuelve el ancho del contenido del elemento
• scrollHeight, devuelve el alto del contenido del elemento

Si bien estas propiedades son de solo lectura, no podremos modificarlas, y solo podremos obtener la informacion de las mismas lo que si podremos usar para modificarlo es utilizar algunas de las propiedaes anteriormente vistas, una practica poco comun es modificar individualmente el estilo de cada elemento ya que habitualmente los estilos se asignan a los elementos desde grupos de propiedades CSS a traves del atributo class, tambien conocido como clases en HTML5, las clases se definen de forma permanente en el tag STYLE o en un archivo individual de extension .css, pero los objetos Element incluyen las siguientes propiedades para asignar una clase diferente a los elementos, permitiendo modificar todos sus estilos a la vez, veamos algunos de ellos:

• className, declara o devuelve el valor del atributo class
• classList, devuelve un array con las clases asignadas a un elemento

El array que devuelve classList es de tipo DOMTokenList que a su vez posee los siguientes metodos:

• add(clase), agrega una clase al elemento
• remove(class), remueve una clase del elemento
• toggle(clase), agrega o remueve una clase dependiendo del estado actual
• contains(clase), detecta si se ha agregado la clase al elemento o no, devuelve un valor tipo booleano

Con lo visto anteriormente pudimos administrar de mejor forma nuestros estilos pero tambien tenemos la posibilidad de modificar su contenido gracias a los siguientes metodos:

• innerHTML, declara o devuelve el contenido de un elemento
• outerHTML, declara o devuelve el elemento y contenido, a diferencia del anterior no solo reemplaza solo el contenido sino el elemento tambien
• insertAdjacementHTML(ubicacion, contenido), este metodo inserta contenido en una ubicacion determinada por el atributo ubicacion

De los tres metodos el primero es el mas sencillo para reemplazar el contenido de un elemento y a su vez lo usamos para recuperar dicho contenido pero el tercer metodo nos permite agregar mas contenido al elemento, para entender mejor este concepto veamos el siguiente ejemplo:

clase.html

<html>
<style>
.texto {
	background-color:#000000;
	color:#FFFFFF;
}
</style>
<script language="javascript">
<!--

var titulo;
var texto;

function modifTitulo()
{
	titulo=document.getElementById("titulo");
	titulo.innerHTML="<h3>" + titulo.innerHTML + "</h3>";
}

function agregarTexto()
{
	texto=document.getElementById("texto");
	texto.innerHTML=texto.innerHTML + ", esto fue adicionado.";
}

function cambiarClase()
{
	texto=document.getElementById("texto");
	texto.className="texto";
}

function mostrarDatos()
{
	texto=document.getElementById("texto");
	var datos="clientWidth: " + texto.clientWidth + "\n" 
		+ "clientHeight: " + texto.clientHeight;
	alert(datos);	
}

//-->
</script>
<body>
<div id="titulo">Este es un titulo</div>
<div id="texto">Esto es un texto</div><br>
<button type="button" onclick="modifTitulo()">Modificar titulo</button><br>
<button type="button" onclick="agregarTexto()">Agregar texto</button><br>
<button type="button" onclick="cambiarClase()">Cambiar clase</button><br>
<button type="button" onclick="mostrarDatos()">Mostrar datos</button>
</body>
</html>

En este caso veremos como modificar algunos estilos de una pagina HTML, para ello primero veamos el codigo HTML, en este caso tendremos dos tags de tipo DIV, uno se llamara titulo y otro texto, cada uno tendra un texto internamente, despues tendremos cuatro botones que por medio de onClick, se que podriamos haber usado addEventListener pero como son cuatro funciones distintas para cuatro elementos distintos preferi hacerlo asi aunque no sea lo recomendable, llamamos a una funcion que hara distintos efectos sobre el texto, tambien tenemos un tag STYLE donde crearemos una clase llamada texto que tendra un valor para la propiedad background-color (color de fondo) y color (color de texto) pero no lo aplicaremos, por ahora, con esto terminamos nuestro codigo HTML pasemos a nuestro tag SCRIPT.

En el codigo script tendremos inicialmente dos variables llamadas titulo y texto, luego tendremos cuatro funciones que haran cuatro tareas distintas veamos cada una de ellas:

• modifTitulo(), en esta funcion primero le asignaremos el elemento titulo a la variable titulo y luego le agregaremos al texto los tags para H3 para hacer una encabezado de tipo3, vean como usamos a innerHTML para recuperar el texto y usarlo entre dos textos literales
• agregarTexto(), esta funcion primero asignara el elemento texto a la variable texto, luego le agregaremos por medio de innerHTML un nuevo texto pero observen como primero recuperamos la informacion anterior y luego le agregamos un nuevo texto
• cambiarClase(), esta funcion al igual que la anterior vuelve a asignar el elemento texto a la variable texto, luego por medio de className asignaremos al elemento relacionado con la variable texto la clase que creamos externamente (texto)
• mostrarDatos(), con esta funcion mostraremos unos datos, como los casos anteriores asignamos el elemento a texto, luego crearemos una variable llamado datos donde almacenaremos los valores de clientWidth y clientHeight del elemento texto, una vez recibido los valores y asignados a datos los mostramos por medio de un alert

Con todo esto explicado podemos probar nuestro programa para ver su salida y conducta

Como pueden ver en la salida pudimos hacer distintos efectos sobre nuestro texto con un poco de codigo y de manera muy simple, como pueden observar en este caso tenemos una gran herramienta para agregar dinamismo a nuestras paginas.

En resumen, hoy hemos visto como trabajar con el objeto Element, algunas propiedades del objeto style, tambien de los propios del objeto, como modificar los estilos, como recuperar informacion, como modificar o recuperar contenido, como cambiarlo o agregar, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.