El objeto de botón en HTML se usa para representar un elemento <button>. El método getElementById() se usa para obtener el objeto del botón.
Valores de propiedad:
- enfoque automático: establece o devuelve si un botón debe enfocarse automáticamente cuando se carga la página o no.
- defaultValue: Establece o devuelve el valor por defecto del botón.
- disabled: Establece o devuelve si el botón está deshabilitado o no.
- form: Devuelve una referencia al formulario que contiene el botón.
- formAction: Establece o devuelve el valor del atributo de formación del botón.
- formEnctype: Establece o devuelve el valor del atributo formEnctype del botón.
- formMethod: Establece o devuelve el valor del atributo formMethod del botón.
- formNoValidate: Establece o devuelve si el botón permite validar o no los datos del formulario.
- formTarget: Establece o devuelve el valor del atributo formTarget del botón.
- name: Establece o devuelve el valor del atributo name del botón de envío.
- type: Devuelve el tipo de elemento de formulario del botón.
- value: Establece o devuelve el valor del atributo value del botón
Crear objeto de botón: el objeto de botón se puede crear usando JavaScript. El método document.createElement() se usa para crear el elemento <button>. Después de crear un objeto de botón, use el método appendChild() para agregar el elemento particular (como div) para mostrarlo.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Button Object
</title>
<!-- script to create new button -->
<script>
function Geeks() {
var myDiv = document.getElementById("GFG");
// creating button element
var button = document.createElement('BUTTON');
// creating text to be
//displayed on button
var text = document.createTextNode("Button");
// appending text to button
button.appendChild(text);
// appending button to div
myDiv.appendChild(button); ;
}
</script>
</head>
<body style = "text-align: center;">
<h1 style = "color:green;">
GeeksforGeeks
</h1>
<h2>
DOM Button Property
</h2>
<p>Click the button to create a button.</p>
<button onclick = "Geeks()">
Press me!
</button>
<br><br>
<div id = "GFG"></div>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Acceso al objeto de botón: acceda al objeto de botón mediante el método getElementById(). Coloque la identificación del elemento del botón en getElementById() para acceder a él.
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Button Object
</title>
<script>
function geek() {
// Accessing the button element
// by using id attribute
var doc = document.getElementById("btn");
// Changing the text content
doc.textContent = "Click me!";
}
</script>
</head>
<body style = "text-align: center;">
<h1 style = "color:green;">
GeeksforGeeks
</h1>
<h2>
DOM Button Property
</h2>
<p>
Click the button to change the
text inside it.
</p>
<button type = "button" id = "btn"
onclick = "geek()">
Try it
</button>
</body>
</html>
Salida:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles:
- Google Chrome
- Borde 12 y superior
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA