HTML DOM Style borderWidth 属性

放鹤归舟

Style borderWidth 属性


定义和用法

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 属性:


Object.style.borderWidth="thin|medium|thick|length|inherit"

返回 borderWidth 属性:


Object.style.borderWidth


描述
thin 定义细的边框。
medium 默认。定义中等的边框。
thick 定义粗的边框。
length 允许您自定义边框的宽度。
inherit 边框的宽度是从父元素继承。


浏览器支持

HTML DOM Style borderWidth 属性HTML DOM Style borderWidth 属性HTML DOM Style borderWidth 属性HTML DOM Style borderWidth 属性HTML DOM Style borderWidth 属性

所有主要浏览器都支持 borderWidth 属性。

注意:IE7 及更早的版本不支持 "inherit" 值。IE8 只有规定了 !DOCTYPE 才支持 "inherit"。IE9 支持 "inherit"。


实例

更改四个边框的宽度:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#ex1{
    border: 1px solid #FF0000;
}
</style>
<script>
function displayResult(){
    document.getElementById("ex1").style.borderWidth="thick thin";
}
</script>
</head>
<body>

<div id="ex1">这是一些文本</div>
<br>
<button type="button" onclick="displayResult()">修改四个边框的宽度</button>

</body>
</html>


版权声明:本页面内容旨在传播知识,为用户自行发布,若有侵权等问题请及时与本网联系,我们将第一时间处理。E-mail:284563525@qq.com

目录[+]

取消
微信二维码
微信二维码
支付宝二维码