Búsqueda personalizada
 
 
 
 
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

<html>
  <head>
  <title>Problema</title>
  <script type="text/javascript" src="../jquery.js"></script>
  <script type="text/javascript" src="funciones.js"></script>
  </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>
</body>
</html>  

funciones.js

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

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

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

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

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

Cuando se presiona el primer botón:

function agregarPropiedadBorder() 
 {    
   var 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() 
   {    
     var 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() 
  {  
   var 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.

 
 
 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion