martes, 12 de febrero de 2013

Modificar los atributos desde jQuery

Desde jQuery, podemos modificar a nuestro gusto cualquier valor de cualquier etiqueta de un documento DOM en tiempo de ejecución. Primero debemos identificar el objeto, ya sea por medio de un identificador, etiqueta o clase, y luego utilizar el método attr(). 

Si el selector regresa más de un elemento, sólo se modificará el primero.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Atributos</title>
<script src="jquery.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(inicio);
function inicio(){
    $("#chica").click(onChica);
    $("#mediana").click(onMediana);
    $("#grande").click(onGrande);
    $("#titulo").click(onTitulo);
}
function onChica(){
    $("img").attr({width:"160px", height:"196px"});
}
function onMediana(){
    $("img").attr({width:"320px", height:"392px"});
}
function onGrande(){
    $("img").attr({width:"480px", height:"588px"});
}
function onTitulo(){
    var titulo = $("img").attr("title");
    $("#texto").text(titulo);
   
}
</script>
</head>

<body>
<input id="chica" type="button" value="Chica">
<input id="mediana" type="button" value="Mediana">
<input id="grande" type="button" value="Grande">
<input id="titulo" type="button" value="Titulo">
<br>
<img src="imagenes/afrodita160x196.jpg" width="160" height="196" alt="Afrodita" title="El nacimiento de Venus, William-Adolphe Bouguereau, 1879">
<p id="texto"></p>
</body>
</html>


Ejemplo: http://pacoarce.com/jQuery/Atributos.html 
Curso completo: https://www.udemy.com/jquery-y-mobile/

No hay comentarios:

Publicar un comentario