Stil outlineStyleEigenschaft
Style-Objekt
Definition und Verwendung
Die outlineStyle-Eigenschaft legt den Stil des Umrisses um ein Element fest oder gibt ihn zurück.
Syntax
Die outlineStyle-Eigenschaft festlegen:
Die outlineStyle-Eigenschaft zurückgeben:
| Wert | Beschreibung |
|---|---|
| none | Standard. Definiert keine Kontur. |
| hidden | Der Umriss ist ausgeschaltet. |
| dotted | Definiert eine gepunktete Kontur. |
| dashed | Definiert einen gestrichelten Umriss. |
| solid | Definiert einen durchgezogenen Umriss. |
| double | Definiert einen doppelten Umriss. |
| groove | Definiert einen 3D-gerillten Umriss. Der Effekt hängt vom Wert von outline-color ab. |
| ridge | Definiert einen 3D-geprägten Umriss. Der Effekt hängt vom Wert von border-color ab. |
| inset | Definiert eine 3D-eingelassene Kontur. Der Effekt hängt vom Wert von border-color ab. |
| outset | Definiert eine 3D-erhabene Kontur. Der Effekt hängt vom Wert von border-color ab. |
| inherit | Der Stil der Kontur wird vom übergeordneten Element geerbt. |
Browser-Unterstützung
Alle wichtigen Browser unterstützen die Eigenschaft outlineStyle.
Hinweis:IE7 und frühere Versionen unterstützen die Eigenschaft outlineStyle nicht. IE8 unterstützt die Eigenschaft outlineStyle nur, wenn ein !DOCTYPE angegeben ist. IE9 unterstützt die Eigenschaft outlineStyle.
Tipps und Hinweise
Ein Umriss ist eine Linie, die um ein Element herum gezeichnet wird. Er wird um den Außenabstand des Elements angezeigt. Er unterscheidet sich jedoch von der border-Eigenschaft.
Die Kontur ist nicht Teil der Abmessungen des Elements; daher umfassen die Eigenschaften width und height des Elements nicht die Breite der Kontur.
Beispiel
Beispiel
Ändern Sie den Stil einer Kontur:
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
#ex1{
border:1px solid red;
outline:green dotted thick;
}
</style>
<script>
function displayResult(){
document.getElementById("ex1").style.outlineStyle="solid";
}
</script>
</head>
<body>
<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="displayResult()">Kontur-Stil ändern</button>
<p><b>Hinweis:</b> IE8 unterstützt die outline-Eigenschaft nur, wenn ein !DOCTYPE angegeben ist.</p>
</body>
</html>
Selbst ausprobieren »
Style-Objekt Andere Erweiterungen