El objeto DOM HR se utiliza para representar el elemento HTML <hr> . Se accede al elemento hr mediante getElementById() .
Propiedades:
- Alinear: Se utiliza para establecer o devolver la alineación de un elemento horizontal.
- color: Se utiliza para establecer o devolver el color del elemento horizontal.
- noshade: Se utiliza para establecer o devolver la propiedad noshade en un elemento horizontal.
- tamaño: Se utiliza para establecer o devolver la altura de una línea horizontal.
- ancho: Se utiliza para establecer o devolver el ancho de una línea horizontal.
Sintaxis:
document.getElementById("ID");
Donde “ID” representa el id del elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>HTML | DOM HR Object</title>
</head>
<body>
<H1>GeeksForGeeks</H1>
<h2>DOM HR Object</h2>
<p>There is a horizontal
rule below this paragraph.</p>
<!-- Assigning id to 'hr' tag. -->
<hr id="GFG">
<p>This is a horizontal rule above this paragraph.</p>
<button onclick="myGeeks()">Try it</button>
<script>
function myGeeks() {
// Accessing 'hr' tag.
var x = document.getElementById("GFG");
x.style.display = "none";
}
</script>
</body>
</html>
Salida: antes de hacer clic en el botón:
Después de hacer clic en el botón:
Ejemplo-2: el objeto HR se puede crear utilizando el método document.createElement.
html
<!DOCTYPE html>
<html>
<head>
<title>HTML | DOM HR Object
</title>
</head>
<body>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2>DOM HR Object</h2>
<button onclick="myGeeks()">Submit</button>
<script>
function myGeeks() {
var g = document.createElement("HR");
document.body.appendChild(g);
}
</script>
</body>
</html>
Salida: antes de hacer clic en el botón:
Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con DOM HR Object se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA