Prop vs ATTR en JavaScript
Este blog indicará las diferencias entre los métodos prop () y attr () en JavaScript.
Diferencias básicas entre prop () y attr () en JavaScript
Las siguientes son las diferencias entre los métodos prop () y attr () en JavaScript:
| apuntalar() | attr () |
|---|---|
| El método prop () puede cambiar el valor del elemento. | El método attr (), por otro lado, no afecta el valor del elemento. |
| Muestra el valor actual del código HTML. | Muestra el valor de conjunto predeterminado. |
| Este método se utiliza como una sintaxis de propiedades para cambiar el valor. | Este método se utiliza para el atributo. |
Consulte el ejemplo dado para obtener prácticamente las diferencias de prop () y attr ().
Ejemplo: prop () y attr () en el campo de texto de entrada
En este ejemplo, aplicaremos el "attr ()" y "apuntalar()"Métodos sobre los campos de texto de entrada por separado.
Veamos cómo funcionan ambos métodos:
El método attr () no cambiará el valor del campo de texto
El método prop () cambiará el valor del campo de texto
En las líneas de código HTML anteriores:
- Incluir el elemento "" y realizar el estilo declarado.
- Además, incluya un encabezado.
- El "" agregado es un elemento HTML que toma un valor del usuario, y el "tipo" corresponde al atributo que se refiere a los datos de entrada debe ser texto.
- El "identificaciónSe especifica el atributo para acceder al campo de texto. Además, establezca el valor predeterminado establecido con el "valor" atributo.
- Además, incluya el botón para activar las funcionalidades.
- Después de eso, incluya el ""Etiqueta para acumular el resultado correspondiente al"attr ()" método.
- Del mismo modo, replique las funcionalidades incluidas para mostrar el resultado del "apuntalar()Método "a través del"texto de entrada" campo.
Ahora, pasemos al código JavaScript:
>
$ ('#btnone').hacer clic (function ()
$ ("#attr").texto ($ ('#inputText').attr ('valor') + " - valor predeterminado");
);
);
$ (documento).Ready (function ()
$ ('#btntwo').hacer clic (function ()
$ ("#Prop").texto ($ ('#textInput').prop ('valor') + " - valor actual");
);
);
En el bloque de código anterior, aplique los siguientes pasos:
- Incluya la biblioteca jQuery dentro del ""Etiqueta para aplicar sus métodos a través del"SRC" atributo.
- Después de eso, aplique el "listo()Método "que ejecutará la función establecida tan pronto como se haya cargado el modelo de objeto de documento (DOM).
- Ahora, acceda al botón creado de modo que la función establecida se ejecuta en el botón Haga clic a través del "hacer clic()" método.
- En la definición de función, acceda al campo de texto de entrada por su "identificación"Y devuelve su contenido de texto a través del"texto()" método.
- Además, aplique el "attr ()Método "para acceder al"valor"Atributo del campo de texto de entrada recuperado.
- En este caso, el valor seguirá siendo el mismo independientemente del texto definido por el usuario.
- Del mismo modo, repita el procedimiento discutido para el "apuntalar()"Método, tal como se aplica al"attr ()" método.
- En este caso, el texto definido por el usuario en el campo de texto se actualizará con el valor establecido y se adjunta a la obtenida ""Elemento por su identificación.
Producción
La salida muestra que el "attr ()"El método no cambia el estado original, mientras que el"apuntalar()"El método muestra el valor actualizado.
Conclusión
El "attr ()"El método no cambia el atributo de valor del elemento. Por otro lado, el "apuntalar()"El método lo actualiza. Ambos métodos tienen sus pros y contras dependiendo de los requisitos del usuario. Este blog declaró las diferencias entre los métodos attr () y prop () con la ayuda de un ejemplo.