最新的Web開發教程
 

Style borderStyle Property

<Style對象

例

添加一個"solid"邊境到<div>元素：

document.getElementById("myDiv").style.borderStyle = "solid";
試一試»

定義和用法

邊框樣式屬性設置或返回元素邊框的樣式。

該屬性可以從一到四個值：

  • 一個值，如：p {邊框樣式：固體} - 所有四個邊框必固
  • 兩個值，如：p {邊框樣式：實線虛線} - 頂部和底部邊框是實心的，左右邊框加以點綴
  • 三個值，如：p {邊框樣式：實線虛線雙} - 上邊框是實心的，左右邊框加以點綴，下邊框是雙
  • 四個值，如：p {邊框樣式：實線虛線雙虛線} - 上邊框是固體，右邊框加以點綴，底部邊框將被雙，左邊框將破滅

瀏覽器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

邊框樣式屬性在所有主流瀏覽器的支持。

句法

返回邊框樣式屬性：

object .style.borderStyle

設置邊框屬性：

object .style.borderStyle= 屬性值
值 描述
none 定義無邊框。 這是默認
hidden 同為"none" ，除了在邊境解決衝突表格元素
dotted 定義虛線邊框
dashed 定義一個虛線框
solid 定義了堅實的邊界
double 定義了兩個邊界。 兩個邊框的寬度是相同的邊框寬度值
groove 定義3D溝槽邊界。 該效果取決於邊框顏色值
ridge 定義3D脊邊界。 該效果取決於邊框顏色值
inset 定義3D插圖邊框。 該效果取決於邊框顏色值
outset 3D突出邊框。 該效果取決於邊框顏色值
initial 將此屬性設置為默認值。 閱讀關於初始
inherit 繼承其父元素此屬性。 閱讀關於繼承

技術細節

默認值： 沒有
返回值： 一個字符串，代表元素的邊框的樣式。
CSS版本 CSS1

更多示例

例

更改的四個邊框的風格<div>元素：

document.getElementById("myDiv").style.borderStyle = "dotted solid double dashed";
試一試»

例

返回的邊框樣式<div>元素：

alert(document.getElementById("myDiv").style.borderStyle);
試一試»

例

所有不同值的演示：

var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue;
試一試»

相關頁面

CSS教程： CSS邊框

CSS參考： border-style property

HTML DOM參考： border property

<Style對象