Bienvenidos sean a este post, hoy hablaremos sobre un metodo imprescindible.
Si bien en este post ya lo mencionamos y en otros tambien, hoy nos centraremos en el exclusivamente, para comenzar veamos como es su sintaxis:
document.getElementById(id);En id debemos pasar el valor del atributo id que le asignamos al elemento que queremos buscar, pero siempre primero el objeto document para decirle que lo busquemos en todo el documento o pagina, esta es su sintaxis mas basica pero se puede almacenarlo en una variable asi como tambien podemos obtener propiedades del elemento en cuestion, para entenderlo un poco mejor veamos un ejemplo.
En este caso les recomiendo crear un archivo de tipo HTML en el escritorio y abrirlo con el navegador bastara, pueden llamarlo simplemente elemento.html y solo deben agregar el siguiente codigo:
elemento.html
<html>
<head>
<title>Metodo timeout</title>
</head>
<body>
<img id="foto" width="320" height="180" border="0" src="https://tinchicusplays.files.wordpress.com/2019/03/hollow-knight_20190304133915.jpg">
<div id="texto">Aqui ira la respuesta</div>
<button type="button" onclick="iniciar()">Iniciar!</button>
</body>
<script language="javascript">
<!--
var imagen, texto;
imagen = document.getElementById("foto");
texto = document.getElementById("texto");
function iniciar()
{
texto.innerHTML = "Ancho: " + imagen.width + "<br>";
texto.innerHTML += "Borde: " + imagen.border + "<br>";
texto.innerHTML += "Alto: " + document.getElementById("foto").height;
}
//-->
</script>
</html>Este es un ejemplo simple pero efectivo, comencemos hablando del codigo HTML que es un poco mas simple, para ello tendremos una imagen (les recomiendo usar esta), luego un DIV donde mostraremos el resultado de nuestra funcion y un boton para llamar a la funcion iniciar, esta parte deberia quedar de la siguiente manera
Esto es solo el codigo HTML pasemos a hablar sobre el codigo de Javascript, lo primero que haremos sera declarar dos variables las cuales despues las usaremos para asociar a la imagen (imagen) y al DIV de texto (texto), ambas las haremos por medio del metodo getElementById y observen que en ambos casos simplemente pasamos el nombre que asignamos en el atributo id de cada elemento, con esto ya tenemos la asociacion, veamos la funcion:
function iniciar()
{
texto.innerHTML = "Ancho: " + imagen.width + "<br>";
texto.innerHTML += "Borde: " + imagen.border + "<br>";
texto.innerHTML += "Alto: " + document.getElementById("foto").height;
}Primero por medio de innerHTML agregaremos un texto al DIV asociado a la variable texto, luego seguimos con varias curiosidades, en los dos primeros casos usamos la variable asociada a la imagen y luego simplemente usamos el atributo que deseamos verificar, hablemos de la primera curiosidad por si no lo conocen el operador += simplemente agrega el nuevo texto al anterior, equivaldria a lo siguiente:
texto.innerHTML = texto.innerHTML + "Borde: " + imagen.border + "<br>";Por ultimo tenemos otra forma de usarlo, en este caso le pasamos directamente el metodo con el objjeto que buscamos, en este caso foto, y por ultimo el atributo de dicho elemento, es igual a lo visto en los otros dos casos, por eso al comienzo les comente que era la forma mas basica de utilizarlo, con todo esto comentado si apretan el boton la pagina quedara de la siguiente forma
Como pueden ver nos devolvio los valores de los atributos en la imagen, todo como queriamos pero esto no se acaba aca y vamos a hacer algo un poco mas profesional pero para ello debemos modificar el codigo anterior de la siguiente manera:
elemento.html
<html>
<head>
<title>getElementById</title>
</head>
<body>
<img id="foto" width="320" height="180" border="0" src="https://tinchicusplays.files.wordpress.com/2019/03/hollow-knight_20190304133915.jpg">
<div id="texto">Aqui ira la respuesta</div>
<button type="button" onclick="iniciar()">Iniciar!</button>
<button type="button" onclick="modificar()">Modificar!</button>
</body>
<script language="javascript">
<!--
var imagen, texto;
imagen = document.getElementById("foto");
texto = document.getElementById("texto");
function iniciar()
{
texto.innerHTML = "Ancho: " + imagen.width + "<br>";
texto.innerHTML += "Borde: " + imagen.border + "<br>";
texto.innerHTML += "Alto: " + document.getElementById("foto").height;
}
function modificar()
{
var ancho=parseInt(imagen.width);
var alto=parseInt(imagen.height);
imagen.width=ancho + parseInt(ancho/2);
imagen.height=alto + parseInt(alto/2);
}
//-->
</script>
</html>No agregamos mucho mas pero las nuevas son jugosas, en el codigo HTML simplememte agregamos un nuevo boton que se llamara modificar y llamara a la funcion con el mismo nombre, pasemos a hablar sobre esta funcion:
function modificar()
{
var ancho=parseInt(imagen.width);
var alto=parseInt(imagen.height);
imagen.width=ancho + parseInt(ancho/2);
imagen.height=alto + parseInt(alto/2);
}Esta funcion la usaremos para modificar a la imagen, en este caso primero definiremos dos variables para el ancho y el alto y para ello les pasaremos los valores de width y height respectivamente pero con una salvedad, a traves de parseInt porque esto convertira los valores de los atributos en numeros enteros, dado que a veces pueden ser de tipo string porque pueden tener la palabra px junto al valor en el atributo, lo siguiente sera utilizar el mismo atributo pero lo usaremos para pasar el valor almacenado en cada variable anterior y a cada una le sumaremos la mitad de dicho valor, volvemos a usar parseInt para que convierta el valor en entero y elimine posibles decimales, con todo esto comentado veamos como trabaja mediante el siguiente video
En el video no solo vemos como sigue funcionando la primera funcion sino que ademas pudimos modificar el tamaño de la imagen, como pueden ver siempre se podra modificar a los atributos que no sean de solo lectura, este es el metodo que mas van a utilizar especialmente cuando intenten hacer paginas dinamicas con HTML5.
En resumen, hoy hemos visto al metodo getElementById, que es, como trabaja, como lo podemos utilizar a traves de un ejemplo, luego vimos otro ejemplo de como podemos utilizarlo tambien, espero les haya sido de utilidad 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.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 