當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文


HTML Style outlineStyle用法及代碼示例


HTML DOM中的Style outlineStyle屬性用於設置或返回元素周圍輪廓的樣式。句法:

  • 它用於返回outlineStyle屬性。
    object.style.outlineStyle
  • 它用於設置outlineStyle屬性。
    object.style.outlineStyle = value

屬性值:

  • none:這是不設置輪廓的默認值。
  • hidden:使用此值,輪廓將關閉。
  • dotted:此值設置虛線輪廓。
  • dashed:此值設置虛線輪廓。
  • solid;此值設置了堅實的輪廓。
  • double;此值設置雙重輪廓。
  • groove;該值設置3D溝槽輪廓。
  • ridge;此值設置3D脊形輪廓。
  • inset;此值設置3D插入輪廓。
  • outset;此值設置3D起始輪​​廓。
  • initial;此值將outline屬性設置為其瀏覽器的默認值。
  • inherit:此值將outline屬性設置為其父元素的值。

返回值:此方法返回一個String值,表示元素輪廓的樣式。


範例1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style outlineStyle Property 
    </title> 
    <style> 
        #myDiv { 
            border:1px solid red; 
            outline:green dotted thick; 
        } 
    </style> 
</head> 
  
<body> 
    <h1> Geeks for Geeks</h1> 
    <h2>HTML | DOM Style outlineStyle Property</h2> 
  
    <div id="myDiv">Welcome to Geeks for Geeks.</div> 
    <br> 
    <button type="button" onclick="myFunction()"> 
        Click Here! 
    </button> 
  
    <script> 
        function myFunction() { 
            document.getElementById("myDiv") 
                .style.outlineStyle = "solid"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出:

  • 在單擊按鈕之前:
  • 單擊按鈕後:

範例2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML | DOM Style outlineStyle Property 
    </title> 
    <style> 
        #myDiv { 
            border:1px solid red; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1> HTML | DOM Style outlineStyle Property</h1> 
  
    <div id="myDiv">Welcome to Geeks for Geeks.</div> 
    <br> 
    <button type="button" onclick="myFunction()"> 
        Click Here! 
    </button> 
  
    <script> 
        function myFunction() { 
            document.getElementById("myDiv") 
                .style.outlineStyle = "dotted"; 
        } 
    </script> 
  
</body> 
  
</html>

輸出:

  • 在單擊按鈕之前:
  • 單擊按鈕後:

支持的瀏覽器:下麵列出了DOM Style outlineStyle屬性支持的瀏覽器:

  • 穀歌瀏覽器
  • IE瀏覽器
  • Firefox
  • Opera
  • Safari


相關用法


注:本文由純淨天空篩選整理自divyatagoel0709大神的英文原創作品 HTML | DOM Style outlineStyle Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。