JavaScript HTML DOM Style borderWidth 属性

  • borderWidth 属性

    borderWidth属性设置或返回元素边框的宽度。此属性可以包含一到四个值:
    • 一个值,如:p {border-width:thick} - 所有四个边框都很粗
    • 两个值,如:p {border-width:thick thin} - 顶部和底部边框将变厚,左右边框将变薄
    • 三个值,如:p {border-width:thick thin medium} - 顶部边框将变厚,左右边框将变薄,底部边框将为中等
    • 四个值,如:p {border-width:thick thin medium 10px} - 顶部边框将变厚,右边框将变薄,底部边框将为中,左边框将为10px
    更改div元素的四个边框的宽度:
    document.getElementById("myDiv").style.borderWidth = "thick";
    尝试一下
  • 浏览器支持

    IE/Edge Chrome FireFox Safari Opera
    属性
    borderWidth
    支持
    支持
    支持
    支持
    支持
  • 语法

    返回borderWidth属性:
    object.style.borderWidth
    设置borderWidth属性:
    object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
  • 属性值

    描述
    thin 定义细边框
    medium 定义中等边框。 这是默认值
    thick 定义粗边框
    length 边框的宽度以长度为单位
    initial 将此属性设置为其默认值。 阅读有关initial信息
    inherit 从其父元素继承此属性。 阅读有关inherit的信息
  • 技术细节

    项目 描述
    默认值: medium
    返回值: 一个字符串,表示元素边框的宽度
    CSS版本 CSS1
  • 更多例子

    将顶部和底部边框的宽度更改为粗,将左边框和右边框的宽度更改为div元素的细长:
    document.getElementById("myDiv").style.borderWidth = "thick thin";
    
    尝试一下
    使用长度 值更改div元素的四个边框的宽度:
    document.getElementById("myDiv").style.borderWidth = "1px 5px 10px 20px";
    
    尝试一下
    返回div元素边框的宽度:
    alert(document.getElementById("myDiv").style.borderWidth);
    
    尝试一下
  • 相关页面

    CSS教程:CSS边框
    CSS参考:border-width属性
    HTML DOM参考:border属性