Style borderBottomStyleEigenschaft
Style-Objekt
Definition und Verwendung
Die borderBottomStyle-Eigenschaft legt den Stil des unteren Rahmens eines Elements fest oder gibt ihn zurück.
Syntax
Die borderBottomStyle-Eigenschaft festlegen:
Object.style.borderBottomStyle="Wert"
Die borderBottomStyle-Eigenschaft zurückgeben:
Object.style.borderBottomStyle
| Wert | Beschreibung |
|---|---|
| none | Standard. Definiert keinen Rahmen. |
| hidden | Dasselbe wie "none". Außer wenn es auf Tabellen angewendet wird, wo hidden verwendet wird, um Rahmenkonflikte aufzulösen. |
| dotted | Definiert einen gestrichelten Rahmen (Punkte). |
| dashed | Definiert einen gestrichelten Rahmen (Striche). |
| solid | Definiert einen durchgehenden Rahmen. |
| double | Definiert einen doppelten Rahmen. Die Breite der doppelten Linien entspricht dem Wert von border-width. |
| groove | Definiert einen 3D-Eingestellt-Rahmen (groove). Der Effekt hängt vom Wert von border-color ab. |
| ridge | Definiert einen 3D-Ausgestellt-Rahmen (ridge). Der Effekt hängt vom Wert von border-color ab. |
| inset | Definiert einen 3D-Innenrahmen (inset). Der Effekt hängt vom Wert von border-color ab. |
| outset | Definiert einen 3D-Außenrahmen (outset). Der Effekt hängt vom Wert von border-color ab. |
| inherit | Der Stil des unteren Rahmens wird vom übergeordneten Element geerbt. |
Browser-Unterstützung
Alle gängigen Browser unterstützen die borderBottomStyle-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
Ändern Sie den Stil des unteren Rahmens:
<html>
<head>
<style type="text/css">
#ex1
{
border: 1px solid #FF0000;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.borderBottomStyle="dotted";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="displayResult()">Stil des unteren Rahmens ändern</button>
</body>
</html>
<head>
<style type="text/css">
#ex1
{
border: 1px solid #FF0000;
}
</style>
<script>
function displayResult()
{
document.getElementById("ex1").style.borderBottomStyle="dotted";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="displayResult()">Stil des unteren Rahmens ändern</button>
</body>
</html>
Selbst ausprobieren »
Style-Objekt Andere Erweiterungen