Style borderStyle Property
Przykład
Dodaj "solidne" obramowanie do elementu <div>:
document.getElementById("myDiv").style.borderStyle = "solid";
Definicja i użycie
Właściwość borderStyle ustawia lub zwraca styl obramowania elementu.
Ta właściwość może przyjmować od jednej do czterech wartości:
- Jedna wartość, np.: p {border-style: solid} - wszystkie cztery krawędzie będą solidne
- Dwie wartości, np.: p {border-style: solid dotted} - górna i dolna krawędź będą wypełnione, lewa i prawa krawędź będą kropkowane
- Trzy wartości, takie jak: p {border-style: solid dotted double}- górna krawędź będzie pełna, lewa i prawa krawędź będą kropkowane, dolna krawędź będzie podwójna
- Cztery wartości, takie jak: p {border-style: solid dotted double dashed} - górna krawędź będzie pełna, prawa krawędź będzie kropkowana, dolna krawędź będzie podwójna, lewa ramka będzie przerywana
Obsługa przeglądarki
Property | |||||
---|---|---|---|---|---|
borderStyle | Yes | Yes | Yes | Yes | Yes |
Składnia
Zwróć właściwość borderStyle:
object.style.borderStyle
Ustaw właściwość borderStyle:
object.style.borderStyle = value
Wartości nieruchomości
Value | Description |
---|---|
none | Defines no border. This is default |
hidden | The same as "none", except in border conflict resolution for table elements |
dotted | Defines a dotted border |
dashed | Defines a dashed border |
solid | Defines a solid border |
double | Defines two borders. The width of the two borders are the same as the border-width value |
groove | Defines a 3D grooved border. The effect depends on the border-color value |
ridge | Defines a 3D ridged border. The effect depends on the border-color value |
inset | Defines a 3D inset border. The effect depends on the border-color value |
outset | Defines a 3D outset border. The effect depends on the border-color value |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Szczegóły techniczne
Domyślna wartość: | Żaden |
---|---|
Wartość zwrotu: | String, reprezentujący styl obramowania elementu |
Wersja CSS | CSS1 |
Więcej przykładów
Przykład
Zmień styl czterech obramowań elementu <div>:
document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
Przykład
Zwróć styl obramowania elementu <div>:
alert(document.getElementById("myDiv").style.borderStyle);
Przykład
Demonstracja wszystkich różnych wartości:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
Powiązane strony
Samouczek CSS: obramowanie CSS
Odniesienie CSS: właściwość border-style
Odniesienie HTML DOM: border property
❮ Obiekt stylu