Style topEigenschaft

Style 对象参考手册Style-Objekt

Definition und Verwendung

Die top-Eigenschaft legt die obere Position eines positionierten Elements fest oder gibt sie zurück.

Diese Eigenschaft legt die obere Position des Elements fest, einschließlich: padding, scrollbar, border und margin.

Tipp:Ein positioniertes Element ist ein Element, dessen position-Eigenschaft auf relative, absolute oder fixed gesetzt ist.

Syntax

Die top-Eigenschaft festlegen:

Object.style.top="auto|length|%|inherit"

Die top-Eigenschaft zurückgeben:

Object.style.top

Wert Beschreibung
auto Standard. Der Browser berechnet die obere Position.
length Definiert die Position der Oberkante des Elements zur Oberkante des nächstgelegenen positionierten Elternelements unter Verwendung von Einheiten wie px, cm. Negative Werte sind zulässig.
% Definiert die Position der Oberkante des Elements zur Oberkante des nächstgelegenen positionierten Elternelements als Prozentwert.
inherit Der Wert der top-Eigenschaft wird vom Elternelement geerbt.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Alle wichtigen Browser unterstützen die top-Eigenschaft.

Hinweis:IE7 und frühere Versionen unterstützen den Wert "inherit" nicht. IE8 unterstützt "inherit" nur, wenn ein !DOCTYPE angegeben ist. IE9 unterstützt "inherit".

Beispiel

Beispiel

Legen Sie die obere Position eines Buttons fest:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
#b1{
    position:absolute;
}
</style>
<script>
function displayResult(){
    document.getElementById("b1").style.top="100px";
}
</script>
</head>
<body>

<input type="button" id="b1" onclick="displayResult()" value="Set top position to 100 px">

</body>
</html>

Selbst ausprobieren »

Style 对象参考手册Style-Objekt Andere Erweiterungen