Element: clientTop-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die clientTop schreibgeschützte Eigenschaft des Element-Interfaces gibt die Breite des oberen Randes eines Elements in Pixeln zurück.
Zwischen dem offsetTop und dem clientTop liegt nur der Rand des Elements. Dies liegt daran, dass offsetTop die Lage des oberen Randes (nicht des Außenabstands) angibt, während der Bereich für den Client direkt unter dem Rand beginnt und die Innenabstände einschließt. Daher ist der clientTop-Wert immer gleich der border-top-width, gerundet auf eine ganze Zahl. Zum Beispiel, wenn die berechnete border-top-width null ist, dann ist clientTop auch null.
Wert
Eine ganze Zahl.
Beispiele
Im folgenden Beispiel hat der Client-Bereich einen weißen Hintergrund und einen 24px schwarzen border-top. Der clientTop-Wert ist der Abstand von dem Ende des Außenabstands (gelb) zu dem Beginn der Innen- und Inhaltsbereiche (weiß): also 24px.
HTML
<div id="container">
<div id="contained">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
</div>
CSS
#container {
margin: 3rem;
background-color: rgb(255 255 204);
border: 4px dashed black;
}
#contained {
margin: 1rem;
border-top: 24px black solid;
padding: 0px 28px;
overflow: auto;
background-color: white;
}
Ergebnis
Spezifikationen
| Specification |
|---|
| CSSOM View Module # dom-element-clienttop |