Thuộc tính style borderStyle
Ví dụ
Thêm đường viền "rắn" vào phần tử <div>:
document.getElementById("myDiv").style.borderStyle = "solid";
Hãy tự mình thử »Sự miêu tả
Thuộc tính borderStyle đặt hoặc trả về kiểu đường viền của phần tử.
Thuộc tính này có thể nhận từ một đến bốn giá trị:
- Một giá trị, như: p {border-style: Solid} - tất cả bốn đường viền sẽ là đường liền nét
- Hai giá trị, như: p {border-style: Solid Dotted} - đường viền trên và dưới sẽ liền nét, đường viền trái và phải sẽ có dấu chấm
- Ba giá trị, như: p {border-style: Solid Dotted Double}- Đường viền trên sẽ là đường viền liền, đường viền bên trái và bên phải sẽ có dấu chấm, đường viền dưới cùng sẽ là đường viền đôi
- Bốn giá trị, như: p {border-style: Solid Dotted Double Dashed} - Đường viền trên cùng sẽ là nét liền, đường viền bên phải sẽ có dấu chấm, đường viền dưới cùng sẽ là đôi, đường viền bên trái sẽ là nét đứt
Hỗ trợ trình duyệt
Property | |||||
---|---|---|---|---|---|
borderStyle | Yes | Yes | Yes | Yes | Yes |
Cú pháp
Trả về thuộc tính borderStyle:
object .style.borderStyle
Đặt thuộc tính borderStyle:
object .style.borderStyle = value
Giá trị tài sản
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 |
Chi tiết kỹ thuật
Giá trị mặc định: | không có |
---|---|
Giá trị trả về: | Một Chuỗi, thể hiện kiểu đường viền của một phần tử |
Phiên bản CSS | CSS1 |
Thêm ví dụ
Ví dụ
Thay đổi kiểu bốn đường viền của phần tử <div>:
document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
Hãy tự mình thử »Ví dụ
Trả về kiểu đường viền của phần tử <div>:
alert(document.getElementById("myDiv").style.borderStyle);
Hãy tự mình thử »Ví dụ
Một minh chứng cho tất cả các giá trị khác nhau:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Đường viền CSS
Tham chiếu CSS: thuộc tính kiểu đường viền
Tham chiếu DOM HTML: thuộc tính đường viền