JS边框border初学.doc

1 borderBottom 属性在一个声明中为下边框设置所有的属性。语法：Object.style.borderBottom=borderWidth borderStyle borderColor值描述值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: thin dotted #FF0000function changeBorder()document.getElementById(p1).style.borderBottom=thick solid blue;This is a paragraph with a border2 borderBottomColor 属性设置元素的下边框的颜色。语法：Object.style.borderBottomColor=color-name|color-rgb|color-hex实例本例改变下边框的颜色：p border: thick solid #FF0000function changeBorderColor()document.getElementById(p1).style.borderBottomColor=blue;This is a paragraph3 borderBottomStyle 属性设置下边框的样式。语法：Object.style.borderBottomStyle=style值描述none定义无边框。hidden与 none 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border-width 的值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge定义 3D 垄状边框。其效果取决于 border-color 的值。inset定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。4 borderBottomWidth 属性设置下边框的宽度。语法：Object.style.borderBottomWidth=thin|medium|thick|length值描述thin定义细的下边框。medium默认。定义中等的下边框。thick定义粗的下边框。length允许您自定义下边框的宽度。实例本例改变下边框的宽度：p border: thin solid #FF0000function changeBorderWidth()document.getElementById(p1).style.borderBottomWidth=thick;This is a paragraph5 borderCollapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。语法：Object.style.borderCollapse=collapse|separate可能的值值描述separate边框会被分开。collapse默认。如果可能，边框会被合并为一个单一的边框。实例下面的例子合并表格边框：function setBorderCollapse()document.getElementById(myTable).style.borderCollapse=collapse 100 200 300 400 6 borderColor 属性设置元素周围边框的颜色。本属性可使用 1 到 4 种颜色： 如果规定一种颜色，比如 table border-color: red - 所有的边框都是红色。 如果规定了两种颜色，比如 table border-color: red green - 上边框和下边框是红色，而左边框和右边框是绿色。 如果规定了三种颜色，比如 table border-color: red green blue- 上边框是红色，左边框和右边框是绿色，下边框是蓝色。 如果规定了四种颜色，比如 table border-color: red green blue yellow - 上边框是红色，右边框是绿色，下边框是蓝色，左边框是黄色。 语法：Object.style.borderColor=color-name|color-rgb|color-hex|transparent实例本例改变边框的颜色：pborder: thick solid #FF0000function changeBorderColor()document.getElementById(p1).style.borderColor=#0000FF #00FF00;This is a paragraph7 borderLeft 属性在一个声明中为左边框设置所有属性。语法：Object.style.borderLeft=borderWidth borderStyle borderColor可能的值：值描述值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: thin dotted #FF0000function changeBorder()document.getElementById(p1).style.borderLeft=thick solid #0000FF;This is a paragraph8 borderLeftColor 属性设置元素的左边框的颜色。语法：Object.style.borderLeftColor=color-name|color-rgb|color-hex|transparent实例本例改变左边框的颜色：p border: thick solid #FF0000function changeBorderColor()document.getElementById(p1).style.borderLeftColor=#0000FF;This is a paragraph9 borderLeftStyle 属性设置左边框的样式。语法：Object.style.borderLeftStyle=style可能的值：值描述none定义无边框。hidden与 none 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border-width 的值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge定义 3D 垄状边框。其效果取决于 border-color 的值。inset定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。实例本例设置左边框的样式：pborder: thick solid #FF0000;function changeBorder()document.getElementById(p1).style.borderLeftStyle=dotted;This is a paragraph10 borderBottomWidth 属性设置下边框的宽度。语法：Object.style.borderBottomWidth=thin|medium|thick|length值描述thin定义细的下边框。medium默认。定义中等的下边框。thick定义粗的下边框。length允许您自定义下边框的宽度。实例本例改变下边框的宽度：p border: thin solid #FF0000function changeBorderWidth()document.getElementById(p1).style.borderBottomWidth=thick;This is a paragraph11 borderCollapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。语法：Object.style.borderCollapse=collapse|separate可能的值值描述separate边框会被分开。collapse默认。如果可能，边框会被合并为一个单一的边框。实例下面的例子合并表格边框：function setBorderCollapse()document.getElementById(myTable).style.borderCollapse=collapse 100 200 300 400 12 borderColor 属性设置元素周围边框的颜色。本属性可使用 1 到 4 种颜色： 如果规定一种颜色，比如 table border-color: red - 所有的边框都是红色。 如果规定了两种颜色，比如 table border-color: red green - 上边框和下边框是红色，而左边框和右边框是绿色。 如果规定了三种颜色，比如 table border-color: red green blue- 上边框是红色，左边框和右边框是绿色，下边框是蓝色。 如果规定了四种颜色，比如 table border-color: red green blue yellow - 上边框是红色，右边框是绿色，下边框是蓝色，左边框是黄色。 语法：Object.style.borderColor=color-name|color-rgb|color-hex|transparent实例本例改变边框的颜色：pborder: thick solid #FF0000function changeBorderColor()document.getElementById(p1).style.borderColor=#0000FF #00FF00;This is a paragraph13 borderSpacing 属性相邻单元格的边框之间的距离（仅用于“边框分离”模式）。语法：Object.style.borderSpacing=length,length可能的值值描述length length使用 px、cm 等单位定义距离。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义了两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。length 不能为负值。实例本例设置相邻单元格的边框之间的距离：function changeBorderSpacing()document.getElementById(myTable).style.borderSpacing=10px 100 200 300 400 14 borderStyle 属性在一行声明中为所有四个设置或返回边框样式。该属性可使用 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定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。实例本例改变边框的样式：p border: thick solid #FF0000function changeBorder()document.getElementById(p1).style.borderStyle=dotted double;This is a paragraph15 borderTop 属性在一行声明中为上边框设置所有的属性。语法：Object.style.borderTop=borderWidth borderStyle borderColor可能的值：值描述值borderWidth设置边框的宽度。 thin medium thick length border