Style paddingLeftEigenschaft
Style-Objekt
Definition und Verwendung
Die Eigenschaft paddingLeft legt den linken Innenabstand eines Elements fest oder gibt ihn zurück.
Syntax
Legen Sie die Eigenschaft paddingLeft fest:
Object.style.paddingLeft="%|length|inherit"
Die Eigenschaft paddingLeft zurückgeben:
Object.style.paddingLeft
| Wert | Beschreibung |
|---|---|
| % | Definiert den linken Innenabstand in Prozent der Breite des Elternelements. |
| length | Definiert die Breite des linken Innenabstands mit px, cm und anderen Einheiten. |
| inherit | Erbt den linken Innenabstand vom Elternelement. |
Browser-Unterstützung
Alle wichtigen Browser unterstützen die Eigenschaft paddingLeft.
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".
Tipps und Hinweise
Die Eigenschaften margin und padding fügen beide Abstand um ein Element herum ein. Der Unterschied besteht jedoch darin, dass margin Abstand außerhalb des Rahmens einfügt, während padding Abstand innerhalb des Rahmens des Elements einfügt.
Beispiel
Beispiel
Ändern Sie den linken Innenabstand eines div-Elements:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginLeft="100px";
}
function changePadding(){
document.getElementById("ex").style.paddingLeft="100px";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="changeMargin()">Ändern Sie den linken Außenabstand des div-Elements</button>
<br>
<br>
<div id="ex2">Dies ist etwas Text.</div>
<br>
<button type="button" onclick="changePadding()">Ändern Sie den linken Innenabstand des div-Elements</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
div{
border: 1px solid #FF0000;
}
</style>
<script>
function changeMargin(){
document.getElementById("ex1").style.marginLeft="100px";
}
function changePadding(){
document.getElementById("ex").style.paddingLeft="100px";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="changeMargin()">Ändern Sie den linken Außenabstand des div-Elements</button>
<br>
<br>
<div id="ex2">Dies ist etwas Text.</div>
<br>
<button type="button" onclick="changePadding()">Ändern Sie den linken Innenabstand des div-Elements</button>
</body>
</html>
Selbst ausprobieren »
Style-Objekt Andere Erweiterungen