Prop vs Att em JavaScript
Este blog indicará as diferenças entre os métodos Prop () e Att () em JavaScript.
Diferenças centrais entre prop () e att () em javascript
A seguir, estão as diferenças entre os métodos Prop () e Att () em JavaScript:
| suporte() | attr () |
|---|---|
| O método prop () pode alterar o valor do elemento. | O método att (), por outro lado, não afeta o valor do elemento. |
| Ele mostra o valor atual do código HTML. | Ele mostra o valor definido padrão. |
| Este método é usado como uma sintaxe das propriedades para alterar o valor. | Este método é usado para o atributo. |
Confira o exemplo dado para praticamente conhecer as diferenças de prop () e att ().
Exemplo: prop () e attr () no campo de texto de entrada
Neste exemplo, aplicaremos o “attr ()" e "suporte()”Métodos nos campos de texto de entrada separadamente.
Vamos ver como os dois métodos funcionam:
O método att () não alterará o valor do campo de texto
o método prop () mudará o valor do campo de texto
Nas linhas de código HTML acima:
- Inclua o elemento "" e execute o estilo declarado.
- Além disso, inclua um título.
- O "" "é um elemento HTML que leva um valor do usuário e" Type "corresponde ao atributo referente aos dados de entrada deve ser o texto.
- O "eu ia”O atributo é especificado para acessar o campo de texto. Além disso, defina o valor padrão declarado com o “valor”Atributo.
- Além disso, inclua o botão para acionar as funcionalidades.
- Depois disso, inclua o “”Tag para acumular o resultado correspondente ao“attr ()”Método.
- Da mesma forma, replique as funcionalidades incluídas para exibir o resultado do “suporte()”Método através do“Entrada de texto" campo.
Agora, vamos para o código JavaScript:
>
$ ('#btnone').clique (function ()
$ ("#attr").texto ($ ('#inputText').attr ('value') + " - valor padrão");
);
);
$ (documento).pronto (function ()
$ ('#btntwo').clique (function ()
$ ("#prop").texto ($ ('#textinput').prop ('value') + " - valor atual");
);
);
No bloco de código acima, aplique as seguintes etapas:
- Inclua a biblioteca jQuery dentro do “”Tag para aplicar seus métodos via“src”Atributo.
- Depois disso, aplique o “preparar()”Método, que executará a função declarada assim que o modelo de objeto de documento (DOM) for carregado.
- Agora, acesse o botão criado de modo que a função declarada seja executada no botão Clique através do “clique()”Método.
- Na definição da função, acesse o campo de texto de entrada por seu “eu ia”E retorne seu conteúdo de texto através do“texto()”Método.
- Além disso, aplique o “attr ()”Método para acessar o“valor”Atributo do campo de texto de entrada buscado.
- Nesse caso, o valor permanecerá o mesmo independentemente do texto definido pelo usuário.
- Da mesma forma, repita o procedimento discutido para o “suporte()”Método, conforme aplicado ao“attr ()”Método.
- Nesse caso, o texto definido pelo usuário no campo de texto será atualizado com o valor definido e anexado ao buscado “”Elemento por seu id.
Saída
A saída mostra que o “attr ()”O método não muda o estado original, enquanto o“suporte()”Método exibe o valor atualizado.
Conclusão
O "attr ()”O método não altera o atributo de valor do elemento. Por outro lado, o “suporte()”O método atualiza. Ambos os métodos têm seus prós e contras, dependendo dos requisitos do usuário. Este blog declarou as diferenças entre os métodos att () e prop () com a ajuda de um exemplo.