Introduccion a DHTML - Referencias
3 - Referencias
La forma de acceder a los valores de los atributos de un elemento depende del browser utilizado. De esta forma, usando por ejemplo código Javasrcipt, podemos modificar esos valores dándole vida al elemento.
Para Netscape, la forma de referenciar un atributo es: document.myObject.atribute = value. Si se tienen elementos anidados se deben especificar ambos elementos, como en document.outer.document.inner.left.
Otra forma de acceder a un atributo es utilizando el arreglo de Layers. Así, solo basta conocer el índice adecuado. Consideremos el siguiente código de ejemplo:
<html>
<div id="outer" style="position:absolute">
<div id="inner" style=" "position:absolute; left:50; top:50"> <img src="http://www.tn.cl/icn/flab1.jpg"> </div>
</div> </html>
De esta forma, si queremos modificar la imagen, lo podemos hacer de dos formas:
document.outer.document.inner.images[0].src = "otro.gif";
document.layers[0].document.layers[0].images[0].src = "otro.gif";
Para Explorer, las referencias a los atributos son distintas en sintaxis, pero tienen la ventaja que cuando se tiene bloques anidados, basta solo con especificar el nombre del bloque, sin especificar el o los bloques exteriores. Por ejemplo, si queremos modificar el atributo Left del elemento inner del ejemplo anterior, basta con colocar:
document.all.inner.style.pixelLeft = 200;
Sobre la propiedad pixelLeft volveremos más tarde. Ahora, si queremos modificar la imagen, solo se referencia al índice del arreglo de im´agenes.
document.images[0].src = "otro.gif";
Como ven, la sintaxis es mucho más fácil y más flexible que para Netscape.
Una forma alternativa de definir los atributos de un elemento DIV (antes de ser modificados) es mediante hojas de estilo. La sintaxis es:
<html>
<style type="text/css"> #miObj {position: absolute; left:50; background-color:FFFFDD; width:200} </style>
<body>
<div id="miObj"> Algun Contenido... </div>
</body> </html>
A continuación se muestra una tabla resumen, con las propiedades segun se utilice Netscape o Explorer incluyendo una breve descripción descripción.
Netscape Descripcion Explorer
left Distancia borde izquierdo pixelLeft
top Distancia borde superior pixelTop
clip.height Altura contenido visible -
clip.width Ancho contenido visible -
- Alto del contenido posHeight
- Ancho del contenido posWidth
visibility Muestra o esconde un objeto visibility
zindex Orden de layering del elemento zindex
background Imagen de fondo background
|
Opiniona sobre 'Introduccion a DHTML - Referencias' (2)
Opina sobre este tutorial |
