轻松上手,快乐学习!

Style borderWidth 属性


实例

更改 <div> 元素的四个边框的宽度:

document.getElementById("myDiv").style.borderWidth = "thick";
亲自试一试 »

定义和用法

borderWidth 属性设置或返回元素边框的宽度。

该属性可使用 1 到 4 种宽度:

  • 如果规定一种宽度,比如:p {border-width: thick} - 所有四个边框都是粗线。
  • 如果规定两种宽度,比如:p {border-width: thick thin} - 上边框和下边框是粗线,而左边框和右边框是细线。
  • 如果规定三种宽度,比如:p {border-width: thick thin medium} - 上边框是粗线,左边框和右边框是细线,下边框是中等的线。
  • 如果规定四种宽度,比如:p {border-width: thick thin medium 10px} - 上边框是粗线,右边框是细线,下边框是中等的线,左边框是 10px 的宽度。

浏览器支持

属性
borderWidth Yes Yes Yes Yes Yes

语法

返回 borderWidth 属性:

object.style.borderWidth

设置 borderWidth 属性:

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"

属性值

描述
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 使用 px、cm 等长度单位定义边框的宽度。
initial 设置该属性为它的默认值。请参阅 initial
inherit 从父元素继承该属性。请参阅 inherit

技术细节

默认值: medium 
返回值: 一个字符串,表示元素边框的宽度
CSS 版本 CSS1

更多实例

实例

将<div>元素的顶部和底部边框的宽度更改为 thick ,将左侧和右侧边框的宽度更改为 thin:

document.getElementById("myDiv").style.borderWidth = "thick thin";
亲自试一试 »

实例

使用 length 值更改 <div> 元素四个边框的宽度:

document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";
亲自试一试 »

实例

返回 <div> 元素的边框宽度:

alert(document.getElementById("myDiv").style.borderWidth);
亲自试一试 »

相关页面

CSS 教程: CSS Border

CSS 参考手册: border-width 属性

HTML DOM 参考手册: border 属性


❮ Style 对象