informaticaPC

Tutorial de JQuery

Acceder a atributos HTML

Atributos

Tanto para obtener como para definir el valor un atributo de un elemento HTML utilizaremos el método attr().

Observa el siguiente ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | atributos en JQuery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            // Asignamos el atributo 'bgcolor' al cuerpo de la página
            $("body").attr("bgcolor","lightyellow");

            // Asignar los atributos
            $("#boton1").click(function() {
                $("#texto").attr("value","Texto definido en el atributo 'value'");
                $("#imagen").attr("title","Texto definido en el atributo 'title'");
                $("#imagen").attr("width","140");
            });

            // Mostrar los atributos y sus valores
            $("#boton2").click(function() {
                alert( "'bgcolor' del documento: " + $("body").attr("bgcolor") );
                alert( "value: " + $("#texto").attr("value") );
                alert( "title: " + $("#imagen").attr("title") );
                alert( "width: " + $("#imagen").attr("width") );
            });
        });

    </script>
  </head>

  <body>

      <p>Pasa el cursor sobre la imagen y comprueba que no se muestra ningún texto</p>

      <p>Después pulsa en el botón 'Asignar los atributos' para asignar texto al cuadro
      de texto y reducir la imagen. Vuelve a <br /> pasar el cursor sobre ella para comprobar
      que ahora se muestra un texto.</p>

      <p>A continuación pulsa en el botón 'Obtener los atributos' para mostrarlos junto
      con sus valores.</p>

      <input id="boton1" type="button" value="Asignar los atributos" />
      <input id="boton2" type="button" value="Leer los atributos" />

      <input id="texto" type="text" size="30" />
      <img id="imagen" src="logo.jpg" alt="" /><p />

  </body>

</html>

Ejemplo

Más información

Vea también: [ Atributos ] - [ attr() ]

Eliminar atributos

En caso de necesitar eliminar atributos de elementos HTML utilizaremos el método removeAttr():

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | eliminar atributos</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
    </style>

    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            // Asignar el atributo 'title' a la imagen
            $("#boton1").click(function(){
                $("#imagen").attr("title","Este es el nuevo texto de 'title'");
            });

            // Eliminar el atributo 'title' de la imagen
            $("#boton2").click(function(){
                $("#imagen").removeAttr("title");
            });
        });

    </script>
  </head>

  <body>

      <p>Pasa el cursor sobre la imagen y comprueba que se muestra el texto
      definido en<br /> el atributo 'title'.</p>

      <p>Después pulsa en el botón 'Eliminar atributo' y vuelve a pasar el cursor sobre
      la<br /> imagen para comprobar que ya no se muestra el texto.</p>

      <p>A continuación pulsa en el botón 'Agregar atributo' y pasa el cursor sobre la<br /> imagen
        para comprobar que se muestra el nuevo texto definido en el atributo 'title'.</p>

      <img id="imagen" src="logo.jpg" alt="" title="El cursor está sobre la imagen" />

      <input id="boton2" type="button" value="Eliminar atributo" />
      <input id="boton1" type="button" value="Agregar atributo" />

  </body>

</html>

Ejemplo

Más información

Vea también: [ Atributos ] - [ removeAttr() ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso