El objeto HTML DOM THead se utiliza para representar el elemento HTML <thead> . Ayuda a dar referencia para acceder al elemento <thead> en el documento HTML.
Accede a un objeto THead:
Podemos acceder fácilmente a un elemento <thead> en el documento usando el método HTML getElementById() .
Sintaxis:
document.getElementById()
Valores de propiedad
- alinear: establece la alineación del contenido del texto.
- valign: establece la alineación vertical del contenido del texto.
- char: establece la alineación del contenido dentro del elemento <thead> en un carácter.
- charoff: Se utiliza para establecer el número de caracteres que se alinearán a partir del carácter especificado por el atributo char. El valor de estos atributos está en forma numérica.
Ejemplo 1: El siguiente código HTML ilustra cómo cambiar el color de fondo del elemento <thead > .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid green;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<p><b>HTML DOM THead Object </b></p>
<table>
<thead id="tableID" bgcolor="43e">
<tr>
<td>Username</td>
<td>User_Id</td>
</tr>
</thead>
<tbody>
<tr>
<td>Shashank</td>
<td>@shashankla</td>
</tr>
<tr>
<td>GeeksforGeeks</td>
<td>@geeks</td>
</tr>
</tbody>
</table>
<p>
Click on the button to change the
background color of thead element.
</p>
<button onclick="btnclick()">
Click here
</button>
<p id="paraID"></p>
</center>
<script>
function btnclick() {
var thead = document.getElementById("tableID");
thead.style.backgroundColor = "red";
}
</script>
</body>
</html>
Producción:
Crear un objeto THead: podemos crear un objeto THead utilizando el método document.createElement() .
Sintaxis:
document.createElement()
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid green;
}
</style>
</head>
<body>
<center>
<h1>
GeeksforGeeks
</h1>
<h2>HTML DOM THead object</h2>
<table id ="tableID">
</table>
<p>
Click button to create thead element.
</p>
<button onclick="btnclick()">
Click here
</button>
<script>
function btnclick() {
/* Create thead element */
var x = document.createElement("THEAD");
/* Create tr element */
var y = document.createElement("TR");
/* Create td element */
var z = document.createElement("TD");
z.innerHTML = "Username";
/* Create td element */
var w = document.createElement("TD");
w.innerHTML = "Password";
y.appendChild(z);
y.appendChild(w);
x.appendChild(y);
document.getElementById("tableID").appendChild(x);
}
</script>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome
- explorador de Internet
- Mini Opera
- Firefox
- safari de manzana
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA