Stil borderColorEigenschaft

Style 对象参考手册Style-Objekt

Definition und Verwendung

Die borderColor-Eigenschaft legt die Farbe des Rahmens eines Elements fest oder gibt sie zurück.

Diese Eigenschaft kann 1 bis 4 Farben akzeptieren:

  • Wenn eine Farbe angegeben wird, z. B. p {border-color: red} – sind alle vier Rahmen rot.
  • Wenn zwei Farben angegeben werden, z. B. p {border-color: red transparent} – sind der obere und der untere Rahmen rot, während der linke und der rechte Rahmen transparent sind.
  • Wenn drei Farben angegeben werden, z. B. p {border-color: red green blue} – ist der obere Rahmen rot, der linke und der rechte Rahmen grün, der untere Rahmen blau.
  • Wenn vier Farben angegeben werden, z. B. p {border-color: red green blue yellow} – ist der obere Rahmen rot, der rechte Rahmen grün, der untere Rahmen blau, der linke Rahmen gelb.

Syntax

Die borderColor-Eigenschaft festlegen:

Object.style.borderColor="color|transparent|inherit"

Gibt die borderColor-Eigenschaft zurück:

Object.style.borderColor

Wert Beschreibung
color Gibt die Farbe des Rahmens an. InCSS-Farbwertenfinden Sie eine vollständige Liste der möglichen Farbwerte.
transparent Standard. Die Farbe des Rahmens ist transparent (der darunterliegende Inhalt scheint durch).
inherit Die Farbe des Rahmens wird vom übergeordneten Element geerbt.

Browser-Unterstützung

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Alle wichtigen Browser unterstützen die borderColor-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 die Farbe aller vier Rahmen:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rookie Tutorial (example.com)</title>
<style type="text/css">
#ex1{
    border: thick solid #FF0000;
}
</style>
<script>
function displayResult(){
    document.getElementById("ex1").style.borderColor="#0080FF #0000FF";
}
</script>
</head>
<body>

<div id="ex1">Dies ist ein Text.</div>
<br>
<button type="button" onclick="displayResult()">Ändern Sie die Farbe der vier Rahmen</button>

</body>
</html>

Selbst ausprobieren »

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