JS边框border初学模板.docx
《JS边框border初学模板.docx》由会员分享，可在线阅读，更多相关《JS边框border初学模板.docx（19页珍藏版）》请在冰豆网上搜索。
JS边框border初学模板
1borderBottom属性在一个声明中为下边框设置所有的属性。
语法：
Object.style.borderBottom=borderWidthborderStyleborderColor
值
描述
值
borderWidth
设置边框的宽度。
∙thin
∙medium
∙thick
∙length
borderStyle
设置边框的样式。
∙none
∙hidden
∙dotted
∙dashed
∙solid
∙double
∙groove
∙ridge
∙inset
∙outset
borderColor
设置边框的颜色。
∙color-name
∙color-rgb
∙color-hex
∙transparent
实例
下面的例子设置下边框：
p{border:
thindotted#FF0000}
functionchangeBorder（）
{
document.getElementById（"p1"）.style.borderBottom="thicksolidblue";
}
value="Changebottomparagraphborder"/>
Thisisaparagraphwithaborder
2borderBottomColor属性设置元素的下边框的颜色。
语法：
Object.style.borderBottomColor=color-name|color-rgb|color-hex
实例
本例改变下边框的颜色：
p{border:
thicksolid#FF0000}
functionchangeBorderColor（）
{
document.getElementById（"p1"）.style.borderBottomColor="blue";
}
value="Changebordercolor"/>
Thisisaparagraph
3borderBottomStyle属性设置下边框的样式。
语法：
Object.style.borderBottomStyle=style
值
描述
none
定义无边框。
hidden
与"none"相同。
不过应用于表时除外，对于表，hidden用于解决边框冲突。
dotted
定义点状边框。
在大多数浏览器中呈现为实线。
dashed
定义虚线。
在大多数浏览器中呈现为实线。
solid
定义实线。
double
定义双线。
双线的宽度等于border-width的值。
groove
定义3D凹槽边框。
其效果取决于border-color的值。
ridge
定义3D垄状边框。
其效果取决于border-color的值。
inset
定义3Dinset边框。
其效果取决于border-color的值。
outset
定义3Doutset边框。
其效果取决于border-color的值。
4borderBottomWidth属性设置下边框的宽度。
语法：
Object.style.borderBottomWidth=thin|medium|thick|length
值
描述
thin
定义细的下边框。
medium
默认。
定义中等的下边框。
thick
定义粗的下边框。
length
允许您自定义下边框的宽度。
实例
本例改变下边框的宽度：
p
{
border:
thinsolid#FF0000
}
functionchangeBorderWidth（）
{
document.getElementById（"p1"）.style.borderBottomWidth="thick";
}
value="Changebottomborder"/>
Thisisaparagraph
5borderCollapse属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的HTML中那样分开显示。
语法：
Object.style.borderCollapse=collapse|separate
可能的值
值
描述
separate
边框会被分开。
collapse
默认。
如果可能，边框会被合并为一个单一的边框。
实例
下面的例子合并表格边框：
functionsetBorderCollapse（）
{
document.getElementById（'myTable'）.style.borderCollapse="collapse"
}
| 100 | 200 |
| 300 | 400 |
value="Collapseborder">
6borderColor属性设置元素周围边框的颜色。
本属性可使用1到4种颜色：
∙如果规定一种颜色，比如table{border-color:
red}-所有的边框都是红色。
∙如果规定了两种颜色，比如table{border-color:
redgreen}-上边框和下边框是红色，而左边框和右边框是绿色。
∙如果规定了三种颜色，比如table{border-color:
redgreenblue}-上边框是红色，左边框和右边框是绿色，下边框是蓝色。
∙如果规定了四种颜色，比如table{border-color:
redgreenblueyellow}-上边框是红色，右边框是绿色，下边框是蓝色，左边框是黄色。
语法：
Object.style.borderColor=color-name|color-rgb|color-hex|transparent
实例
本例改变边框的颜色：
p
{
border:
thicksolid#FF0000
}
functionchangeBorderColor（）
{
document.getElementById（"p1"）.style.borderColor="#0000FF#00FF00";
}
value="Changebordercolor"/>
Thisisaparagraph
7borderLeft属性在一个声明中为左边框设置所有属性。
语法：
Object.style.borderLeft=borderWidthborderStyleborderColor
可能的值：
值
描述
值
borderWidth
设置边框的宽度。
∙thin
∙medium
∙thick
∙length
borderStyle
设置边框的样式。
∙none
∙hidden
∙dotted
∙dashed
∙solid
∙double
∙groove
∙ridge
∙inset
∙outset
borderColor
设置边框的颜色。
∙color-name
∙color-rgb
∙color-hex
∙transparent
实例
本例改变左边框的宽度、样式和颜色：
p
{
border:
thindotted#FF0000
}
functionchangeBorder（）
{
document.getElementById（"p1"）.style.borderLeft="thicksolid#0000FF";
}
value="Changeleftborder"/>
Thisisaparagraph
8borderLeftColor属性设置元素的左边框的颜色。
语法：
Object.style.borderLeftColor=color-name|color-rgb|color-hex|transparent
实例
本例改变左边框的颜色：
p
{
border:
thicksolid#FF0000
}
functionchangeBorderColor（）
{
document.getElementById（"p1"）.style.borderLeftColor="#0000FF";
}
value="Changeleftborder"/>
Thisisaparagraph
9borderLeftStyle属性设置左边框的样式。
语法：
Object.style.borderLeftStyle=style
可能的值：
值
描述
none
定义无边框。
hidden
与"none"相同。
不过应用于表时除外，对于表，hidden用于解决边框冲突。
dotted
定义点状边框。
在大多数浏览器中呈现为实线。
dashed
定义虚线。
在大多数浏览器中呈现为实线。
solid
定义实线。
double
定义双线。
双线的宽度等于border-width的值。
groove
定义3D凹槽边框。
其效果取决于border-color的值。
ridge
定义3D垄状边框。
其效果取决于border-color的值。
inset
定义3Dinset边框。
其效果取决于border-color的值。
outset
定义3Doutset边框。
其效果取决于border-color的值。
实例
本例设置左边框的样式：
p
{
border:
thicksolid#FF0000;
}
functionchangeBorder（）
{
document.getElementById（"p1"）.style.borderLeftStyle="dotted";
}
value="Changeleftborder"/>
Thisisaparagraph
10borderBottomWidth属性设置下边框的宽度。
语法：
Object.style.borderBottomWidth=thin|medium|thick|length
值
描述
thin
定义细的下边框。
medium
默认。
定义中等的下边框。
thick
定义粗的下边框。
length
允许您自定义下边框的宽度。
实例
本例改变下边框的宽度：
p
{
border:
thinsolid#FF0000
}
functionchangeBorderWidth（）
{
document.getElementById（"p1"）.style.borderBottomWidth="thick";
}
value="Changebottomborder"/>
Thisisaparagraph
11borderCollapse属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的HTML中那样分开显示。
语法：
Object.style.borderCollapse=collapse|separate
可能的值
值
描述
separate
边框会被分开。
collapse
默认。
如果可能，边框会被合并为一个单一的边框。
实例
下面的例子合并表格边框：
functionsetBorderCollapse（）
{
document.getElementById（'myTable'）.style.borderCollapse="collapse"
}
| 100 | 200 |
| 300 | 400 |
value="Collapseborder">
12borderColor属性设置元素周围边框的颜色。
本属性可使用1到4种颜色：
∙如果规定一种颜色，比如table{border-color:
red}-所有的边框都是红色。
∙如果规定了两种颜色，比如table{border-color:
redgreen}-上边框和下边框是红色，而左边框和右边框是绿色。
∙如果规定了三种颜色，比如table{border-color:
redgreenblue}-上边框是红色，左边框和右边框是绿色，下边框是蓝色。
∙如果规定了四种颜色，比如table{border-color:
redgreenblueyellow}-上边框是红色，右边框是绿色，下边框是蓝色，左边框是黄色。
语法：
Object.style.borderColor=color-name|color-rgb|color-hex|transparent
实例
本例改变边框的颜色：
p
{
border:
thicksolid#FF0000
}
functionchangeBorderColor（）
{
document.getElementById（"p1"）.style.borderColor="#0000FF#00FF00";
}
value="Changebordercolor"/>
Thisisaparagraph
13borderSpacing属性相邻单元格的边框之间的距离（仅用于“边框分离”模式）。
语法：
Object.style.borderSpacing=length,length
可能的值
值
描述
lengthlength
使用px、cm等单位定义距离。
如果定义一个length参数，那么定义的是水平和垂直间距。
如果定义了两个length参数，那么第一个设置水平间距，而第二个设置垂直间距。
length不能为负值。
实例
本例设置相邻单元格的边框之间的距离：
functionchangeBorderSpacing（）
{
document.getElementById（'myTable'）.style.borderSpacing="10px"
}
| 100 | 200 |
| 300 | 400 |
value="Changeborderspacing">
14borderStyle属性在一行声明中为所有四个设置或返回边框样式。
该属性可使用1到4种样式。
语法：
Object.style.borderStyle=style
可能的值：
值
描述
none
定义无边框。
hidden
与"none"相同。
不过应用于表时除外，对于表，hidden用于解决边框冲突。
dotted
定义点状边框。
在大多数浏览器中呈现为实线。
dashed
定义虚线。
在大多数浏览器中呈现为实线。
solid
定义实线。
double
定义双线。
双线的宽度等于border-width的值。
groove
定义3D凹槽边框。
其效果取决于border-color的值。
ridge
定义3D垄状边框。
其效果取决于border-color的值。
inset
定义3Dinset边框。
其效果取决于border-color的值。
outset
定义3Doutset边框。
其效果取决于border-color的值。
实例
本例改变边框的样式：
functionchangeBorder（）
{
document.getElementById（"p1"）.style.borderStyle="dotteddouble";
}
Thisisaparagraph
15borderTop属性在一行声明中为上边框设置所有的属性。
语法：
Object.style.borderTop=borderWidthborderStyleborderColor
可能的值：
值
描述
值
borderWidth
设置边框的宽度。
∙thin
∙medium
∙thick
∙length
borderStyle
设置边框的样式。
∙none
∙hidden
∙dotted
∙dashed
∙solid
∙double
∙groove
∙ridge
∙inset
∙outset
borderColor
设置边框的颜色。
∙color-name
∙color-rgb
∙color-hex
∙transparent
升级会员 