Uso de metodos de atributos

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

Método attr(nombre de propiedad) y Método attr(nombre de propiedad,valor)

El método attr () establece o devuelve atributos y valores de los elementos seleccionados.
Cuando se usa este método para devolver el valor del atributo, devuelve el valor del PRIMER elemento coincidente.
Cuando este método se utiliza para establecer valores de atributo, establece uno o más pares de atributo / valor para el conjunto de elementos coincidentes.

Sintaxis

Devuelve el valor de un atributo:

$(selector).attr(attributo)

Establezca el atributo y el valor:

$(selector).attr(attributo,valor)

Establecer atributo y valor usando una función:

$(selector).attr(attribute,function(index,currentvalue))

<!DOCTYPE html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
 $("img").attr("width", "500");
 $("img").attr("height", "375");
  });
});
</script>
</head>
<body>
<img src="imagenes/img_pulpitrock.jpg" alt="Pulpit Rock" width="284" height="213"><br>
<button>Establece el ancho y alto de la imagen</button>
</body>
</html>

Ver ejemplo anterior

Método removeAttr(nombre de propiedad)

El método removeAttr () elimina uno o más atributos de los elementos seleccionados.

Sintaxis

$(selector).removeAttr(attribute)

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeAttr("style");
  });
});
</script>
</head>
<body>

<h1>Este es un encabezado</h1>

<p style="font-size:120%;color:red">Este es un parrafo.</p>
<p style="font-weight:bold;color:blue">Este es otro parrafo.</p>
<button>Borra el estilo de los elementos p </button>
</body>
</html>

Ver ejemplo anterior

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="func8.js"></script>
</body>

</html>

Ver ejemplo anterior

func8.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.

(adsbygoogle = window.adsbygoogle || []).push({});

Uso de metodos de atributos

Método attr(nombre de propiedad) y Método attr(nombre de propiedad,valor)

Método removeAttr(nombre de propiedad)