La propiedad DOM clientTop se usa para devolver el ancho del borde superior a un elemento en términos de píxeles. No incluye la medida del ancho del relleno superior o el margen izquierdo. Es una propiedad de solo lectura.
Sintaxis:
element.clientTop
Valor de retorno: Devuelve un valor numérico que representa el ancho del borde superior de un elemento.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM clientTop Property
</title>
<style>
h1 {
color: green;
font-size: 35px;
}
#GFG {
height: 100px;
width: 350px;
padding: 20px;
margin: 25px;
border-left: 10px solid coral;
border-top: 15px solid blue;
background-color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksForGeeks</h1>
<h2>DOM clientTop Property </h2>
<div id="GFG">
<p style="color:white;font-size:25px;">
GeeksforGeeks
</p>
<p id="sudo" style="color:white;"></p>
</div>
<button onclick="Geeks()">Submit</button>
<script>
function Geeks() {
var w = document.getElementById("GFG");
// Using clientTop property
var x = "Border-Top-Width is: "
+ w.clientTop + "px<br>";
x += "Border-Left-width : "
+ w.clientLeft + "px";
document.getElementById("sudo").innerHTML = x;
}
</script>
</body>
</html>
Producción:
- Inicialmente:
- Después de hacer clic en el botón:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM clientTop se enumeran a continuación:
- Google Chrome 1.0
- Internet Explorer 4.0
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA