8 - Métodos attr(nombre de propiedad), attr(nombre de propiedad,valor) y removeAttr(nombre de propiedad)

Estos métodos nos permiten agregar propiedades a un elemento HTML y recuperar el valor de una propiedad.

Para recuperar el valor de una propiedad (si hay muchos elementos que recupera la función $, solo retorna la propiedad del primero):

$(elemento).attr(nombre de propiedad)

Para fijar el valor de una propiedad (si hay muchos elementos que recupera la función $, se inicializan para todos):

$(elemento).attr(nombre de propiedad,valor)

Para eliminar una propiedad de un elemento o conjunto de elementos tenemos:

$(elemento).removeAttr(nombre de la propiedad)

Problema:Definir una tabla sin el atributo border. Al presionar un botón añadirle la propiedad border con el valor 1. Si se presiona otro botón recuperar y mostrar el valor del atributo border y por último si se presiona otro botón eliminar la propiedad border.

pagina1.html

<!DOCTYPE html>
<html>

<head>
  <title>Ejemplo de jQuery</title>
  <meta charset="UTF-8">
</head>

<body>
  <input type="button" id="boton1" value="Añadir propiedad border"><br>
  <input type="button" id="boton2" value="Recuperar valor de la propiedad border"><br>
  <input type="button" id="boton3" value="Eliminar la propiedad border">
  <table id="tabla1">
    <tr>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
      <td>1111111111</td>
    </tr>
    <tr>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
      <td>2222222222</td>
    </tr>
    <tr>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
      <td>3333333333</td>
    </tr>
  </table>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="funciones.js"></script>
</body>

</html>

funciones.js

let x = $(document);
x.ready(inicializarEventos);

function inicializarEventos() {
  let x = $("#boton1");
  x.click(agregarPropiedadBorder);
  x = $("#boton2");
  x.click(recuperarPropiedadBorder);
  x = $("#boton3");
  x.click(eliminarPropiedadBorder);
}

function agregarPropiedadBorder() {
  let x = $("#tabla1");
  x.attr("border", "1");
}

function recuperarPropiedadBorder() {
  let x = $("#tabla1");
  if (x.attr("border") != undefined)
    alert(x.attr("border"));
  else
    alert("No está definida la propiedad border en la tabla");
}

function eliminarPropiedadBorder() {
  let x = $("#tabla1");
  x.removeAttr("border");
}

Cuando se presiona el primer botón:

function agregarPropiedadBorder() {
  let x = $("#tabla1");
  x.attr("border", "1");
}

Obtenemos la referencia de la tabla mediante su id y llamamos al método attr pasando como primer parámetro el nombre de la propiedad a agregar y como segundo parámetro el valor de la propiedad.

Cuando se presiona el segundo botón:

function recuperarPropiedadBorder() {
  let x = $("#tabla1");
  if (x.attr("border") != undefined)
    alert(x.attr("border"));
  else
    alert("No está definida la propiedad border en la tabla");
}

Llamamos al método attr enviándole como parámetro el nombre de la propiedad que queremos rescatar. Si retorna el valor undefined significa que no tiene dicha propiedad el elemento HTML, en caso contrario retorna su valor y procedemos a mostrarlo mediante un alert.

Cuando se presiona el tercer botón:

function eliminarPropiedadBorder() {
  let x = $("#tabla1");
  x.removeAttr("border");
}

Obtenemos la referencia a la tabla mediante su id y llamamos al método removeAttr con el nombre de la propiedad a eliminar.


Retornar