HTML | DOM 样式大纲属性

HTML DOM 中的Style 大纲属性用于在一个声明中设置或返回所有大纲属性。此属性在元素周围绘制一条线。它以简短的形式设置或返回一个或多个边框属性。
大纲可以设置以下属性：

• 轮廓宽度
• 大纲样式
• 轮廓颜色

句法：

• 它返回大纲属性。

  object.style.outline

• 它用于设置轮廓属性。

  object.style.outline = "width|style|color|initial|inherit"

属性值：

• 宽度：它设置轮廓宽度。
• style：它设置轮廓的样式。
• 颜色：它设置轮廓的颜色。
• 初始值：它将 DOM 大纲属性设置为其默认值。
• 继承：元素从父元素继承其属性。

示例 1：在 div 容器周围添加粗实心蓝色轮廓。

      

    
        HTML DOM Style outline Property
    

  

    
        GeeksforGeeks
          
        DOM Style outline Property
    
  
    
        function myGeeks() {
            document.getElementById("container").style.outline
                    = "thick solid blue";
        }
        myGeeks();
    

  
                    

输出：

示例 2：在 div 容器周围添加一个长度为绿色的虚线轮廓。

      

    
        HTML DOM Style outline Property
    
    
    #container {
        border: 3px solid black;
        outline: 3px solid blue;
    }
    

  

    
        GeeksforGeeks
          
        DOM Style outline Property
    
      
    
        Click Here!
    
      
    
    
        function myGeeks() {
            document.getElementById("GFG").style.outline
                    = "7px dashed green";
        }
    

  
                    

输出：

• 点击按钮前：
  
• 点击按钮后：
  

支持的浏览器： DOM Style 大纲属性支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器