Najnowsze tutoriale tworzenie stron internetowych
 

Style borderStyle Property

<Style obiektu

Przykład

Dodaj "solid" granicę do <div> element:

document.getElementById("myDiv").style.borderStyle = "solid";
Spróbuj sam "

Definicja i Wykorzystanie

Zestawy własności BorderStyle lub zwraca styl obramowania elementu.

Ta właściwość może trwać od jednego do czterech wartości:

  • Jedna wartość, jak: p {border-style: stałe} - wszystkie cztery granice będą stałe
  • Dwie wartości, takie jak: p {border-style: stałe przerywana} - górna i dolna granica będzie stałe, po lewej i prawej granicy będzie przerywana
  • Trzy wartości, takie jak: p {border-style: stałe dwukrotnie przerywana} - górna granica będzie stałe, po lewej i prawej granicy będzie przerywana, dolna granica będzie podwójnie
  • Cztery wartości, takie jak: p {border-style: stałe przerywana podwójna przerywana} - górna granica będzie stały, prawo granica będzie przerywana, dolna granica będzie podwójna, lewa granica będzie przerywana

Wsparcie przeglądarka

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Nieruchomość BorderStyle jest dostępna we wszystkich głównych przeglądarkach.


Składnia

Zwraca właściwość BorderStyle:

object .style.borderStyle

Ustaw właściwość BorderStyle:

object .style.borderStyle= wartości nieruchomości
Wartość Opis
none Nie określa granicy. Jest to domyślny
hidden Tak samo jak "none" , z wyjątkiem rozwiązania konfliktu granicznego dla elementów tabeli
dotted Definiuje granicę przerywana
dashed Określa przerywaną granicę
solid Definiuje stałą granicę
double Definiuje dwie granice. Szerokość dwie granice są takie same jak wartości granicznej szerokości
groove Definiuje rowkowane granicę 3D. Efekt zależy od wartości granicznej kolorów
ridge Definiuje prążkowane granicę 3D. Efekt zależy od wartości granicznej kolorów
inset Definiuje granicę 3D wstawka. Efekt zależy od wartości granicznej kolorów
outset Definiuje początku granicę 3D. Efekt zależy od wartości granicznej kolorów
initial Ustawia tę właściwość na wartość domyślną. Przeczytaj o początkowy
inherit Dziedziczy nieruchomość od swojego rodzica. Przeczytaj o dziedziczyć

Szczegóły techniczne

Domyślna wartość: Żaden
Zwracana wartość: Ciąg reprezentujący styl obramowania elementu jest
Wersja CSS CSS1

Więcej przykładów

Przykład

Zmienić styl z czterech granic z <div> element:

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
Spróbuj sam "

Przykład

Zwraca styl obramowania <div> element:

alert(document.getElementById("myDiv").style.borderStyle);
Spróbuj sam "

Przykład

Demonstracja wszystkich różnych wartości:

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
Spróbuj sam "

Podobne strony

Kurs CSS: CSS Border

Odniesienie CSS: border-style property

HTML DOM: border property


<Style obiektu