El método toggleAttribute() de la interfaz del elemento alterna un atributo booleano en el elemento dado. Los atributos de un elemento se pueden cambiar usando este método.
Sintaxis:
Element.toggleAttribute("attribute_name");
Parámetros:
- Name_of_attribute: Nombre del atributo que se alternará. El nombre del atributo se convierte automáticamente a minúsculas cuando se llama a toggleAttribute() en un elemento HTML en un documento HTML.
Valor devuelto: Devuelve verdadero si el nombre del atributo está presente, de lo contrario , devuelve falso .
Ejemplo: en este ejemplo, cambiaremos el atributo del elemento de entrada a solo lectura . El nombre del atributo se convierte automáticamente a minúsculas cuando se llama a toggleAttribute() en un elemento HTML en un documento HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ToggleAttribute</title>
<script>
function change() {
var input =
document.querySelector("input");
input.toggleAttribute("readonly");
}
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<input class="input"
value="This is editable">
<button onclick="change()">
Click to change attribute
</button>
</body>
</html>
Producción:
En esta salida, puede ver que después de hacer clic en el botón, el atributo del elemento de entrada cambia a «solo lectura» , por lo que no se puede editar .
Navegadores compatibles: los navegadores compatibles con el método DOM toggleAttribute() se enumeran a continuación:
- Google Chrome
- Firefox
- safari de manzana
- Ópera