当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


HTML Style border用法及代码示例


DOM样式的border属性用于设置或返回元素边框的样式。我们可以为各个侧面(顶部,右侧,底部,左侧)设置不同的边框样式。 border-style属性的每一侧都可以采用多个值。

用法:

  • 它用于返回Style属性。
    object.style.borderStyle 
  • 它用于设置样式属性。
    object.style.borderStyle = value 

DOM border-style属性值


  • none:没有创建边框,并且将其保留为空白
  • hidden:就像“无”一样,除非添加背景图像,否则它不会显示任何边框,则border-top-width将被设置为0,与用户定义的值无关。
  • dotted:一系列点显示在一行中作为边框。
  • solid:一条实线和粗线用作边框。
  • dashed:一系列方形虚线用作边框。
  • double:彼此平行放置的两条线充当边界。
  • groove:显示3D沟槽边框,其效果取决于border-color值。
  • ridge:显示3D棱形边框,其效果取决于border-color值。
  • inset:显示3D嵌入边框,其效果取决于border-color值。
  • 起始:显示3D起始边框,其效果取决于border-color值。

返回值:它返回一个表示元素边框样式的字符串值。

示例1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h1 { 
            color:green; 
            font-size:39px; 
        } 
          
        #GFG { 
            border:thick solid coral; 
            width:70%; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksForGeeks</h1> 
        <h2>DOM Style border Property.</h2> 
        <div id="GFG"> 
            <p>GeeksForGeeks.</p> 
            <p>A Computer Science Portal for geeks.</p> 
        </div> 
        <br> 
        <button type="button" onclick="myGeeks()">Submit</button> 
  
        <script> 
            function myGeeks() { 
                
                // Return the style property. 
                document.getElementById("GFG").style.borderStyle =  
                  "dashed dotted double solid"; 
            } 
        </script> 
  
</body> 
  
</html>

输出:

单击按钮之前::

单击按钮后:

示例2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <style> 
        h1 { 
            color:green; 
            font-size:39px; 
        } 
          
        #GFG { 
            width:70%; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksForGeeks</h1> 
        <h2>DOM Style border Property.</h2> 
        <div id="GFG"> 
            <p>GeeksForGeeks.</p> 
            <p>A Computer Science Portal for geeks.</p> 
        </div> 
        <br> 
        
        <button type="button" onclick="myGeeks()"> 
          Submit 
        </button> 
  
        <script> 
            function myGeeks() { 
                
                // Return the dotted style border. 
                document.getElementById("GFG").style.borderStyle =  
                  "  dotted "; 
            } 
        </script> 
  
</body> 
  
</html>

输出:

在单击按钮之前:

单击按钮后:

支持的浏览器:下面列出了DOM样式border属性支持的浏览器:

  • 谷歌浏览器
  • IE浏览器
  • Firefox
  • Opera
  • Safari


相关用法


注:本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM Style border Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。