Style ตัวแปร borderStyle

การระบุและการใช้งาน

borderStyle ตัวแปรนี้ตั้งค่าหรือกลับรับรูปแบบของขอบปริมาณตัวองค์ประกอบ。

ตัวแปรนี้สามารถใช้ค่าหนึ่งถึงสี่ค่า：

  • ค่าเดียว เช่น：p {border-style: solid} - ขอบทั้งสี่เป็นสีเส้นแบบเดี่ยว
  • สองค่า เช่น：p {border-style: solid dotted} - ขอบบนล่างเป็นสีเส้นแบบเดี่ยว ขอบซ้ายขวาเป็นสีเส้นแบบหยก
  • สามค่า เช่น：p {border-style: solid dotted double} - ขอบบนเป็นสีเส้นแบบเดี่ยว ขอบซ้ายขวาเป็นสีเส้นแบบหยก ขอบล่างเป็นสีเส้นแบบเกี่ยว
  • สี่ค่า เช่น：p {border-style: solid dotted double dashed} - ขอบบนเป็นสีเส้นแบบเดี่ยว ขอบขวาเป็นสีเส้นแบบหยก ขอบล่างเป็นสีเส้นแบบเกี่ยว ขอบซ้ายเป็นสีเส้นแบบหยก

ดูเพิ่มเติมที่：

คู่มืออ้างอิง CSS ต่อรายละเอียด：CSS ขอบเขต

คู่มืออ้างอิง CSS：ตัวแปร border-style

HTML DOM คู่มืออ้างอิง：border 属性

实例

例子 1

为 <div> 元素添加实心边框：

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

亲自试一试

例子 2

更改 <div> 元素的四个边框的样式：

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

亲自试一试

例子 3

返回 <div> 元素的边框样式：

alert(document.getElementById("myDiv").style.borderStyle);

亲自试一试

例子 4

对所有不同值的演示：

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

亲自试一试

语法

返回 borderStyle 属性：

object.style.borderStyle

设置 borderStyle 属性：

object.style.borderStyle = value
值 描述
none 定义无边框。默认。
hidden 与 "none" 相同，但在解决表格元素的边框冲突中除外。
dotted 定义点状边框。
dashed 定义虚线边框。
solid 定义实心边框。
double 定义两个边界。两个边框的宽度与 border-width 的值相同。
groove 定义 3D 凹槽边框。效果取决于 border-color 的值。
ridge 定义 3D 脊状边界。效果取决于 border-color 的值。
inset 定义 3D inset 边框。效果取决于 border-color 的值。
outset 定义 3D outset 边框。效果取决于border-color的值。
initial 将此属性设置为其默认值。请参阅 initial。
inherit 从其父元素继承此属性。请参阅 inherit。

技术细节

默认值： 无
返回值： 字符串，表示元素边框的样式。
CSS 版本： CSS1

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
สนับสนุน สนับสนุน สนับสนุน สนับสนุน สนับสนุน