jQuery | prop() con ejemplos

prop() es un método incorporado en jQuery que se usa para establecer o devolver propiedades y valores para los elementos seleccionados. Cuando se usa este método para devolver el valor de propiedad, devuelve el valor del PRIMER elemento coincidente y cuando se usa este método para establecer valores de propiedad, establece una o más propiedades para los elementos seleccionados.
Sintaxis:

$(selector).prop(para1, para2)

Parámetros: Acepta dos parámetros que se especifican a continuación:

  • para1: Especifica la propiedad.
  • para2: Especifica el valor de la propiedad en caso de conjunto.
  • Valor devuelto: Devuelve la propiedad y el valor establecido para la propiedad del elemento seleccionado.

    Código jQuery para mostrar el funcionamiento del método prop():

    <html>
       <head>
          <script
          src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
          </script>
          <!-- jQuery code to show the working of this method -->
          <script>
             $(document).ready(function(){
                 $("button").click(function(){
                 var $x = $("p");
                 $x.prop("color", "green");
                 $x.append(" Property is color and its value: " + $x.prop("color"));
                       
                 });
             });
          </script>
          <style>
             div{
             width: 250px;
             padding: 10px;
             height: 100px;
             border: 2px solid green;
             }
          </style>
       </head>
       <body>
          <div>
             <p></p>
             <br><br>
             <!-- click on button this method -->
             <button>Click Here!</button>
          </div>
       </body>
    </html>
    

    Salida:
    Antes de hacer clic en el botón «Haga clic aquí»-

    Después de hacer clic en el botón «Haga clic aquí»-

    Publicación traducida automáticamente

    Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *