HTML Style outlineWidth用法及代码示例

DOM样式outlineWidth属性用于设置或返回元素周围轮廓的宽度。轮廓线是在元素边界之外的指定元素周围创建的线，以使特定区域与众不同且易于区分。

用法:

它返回outlineWidth属性。
```
object.style.outlineWidth
```

它用于设置outlineWidth属性。

object.style.outlineWidth = "thin|medium|thick|length|initial|
inherit"

属性值：

thin:它将轮廓宽度设置为细，实现的轮廓比宽度指定为中等和厚的轮廓要细。
Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style outlineWidth Property 
    </title> 
  
    <style> 
        .elem { 
            outline-style:dashed; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style OutlineWidth</b> 
      
    <p class="elem"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and  
        explained computer science and programming 
        articles, quizzes and interview questions. 
        The portal also has dedicated GATE preparation 
        and competitive programming sections. 
    </p> 
      
    <button onclick="changeWidth()"> 
        Change outlineWidth 
    </button> 
      
    <!--Script to change the outline width -->
    <script> 
        function changeWidth() { 
            elem = document.querySelector('.elem'); 
            elem.style.outlineWidth = 'thin'; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

medium:它将轮廓宽度设置为默认值。轮廓的宽度比轮廓设置的厚度薄，并且比轮廓设置为细的轮廓厚。
Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style outlineWidth Property 
    </title> 
  
    <style> 
        .elem { 
            outline-style:dashed; 
            outline-width:thin; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style OutlineWidth</b> 
      
    <p class="elem"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and  
        explained computer science and programming 
        articles, quizzes and interview questions. 
        The portal also has dedicated GATE preparation 
        and competitive programming sections. 
    </p> 
      
    <button onclick="changeWidth()"> 
        Change outlineWidth 
    </button> 
      
    <!--Script to change the outline width -->
    <script> 
        function changeWidth() { 
            elem = document.querySelector('.elem'); 
            elem.style.outlineWidth = 'medium'; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

thick:它将轮廓宽度设置为厚，获得的轮廓要比以宽度和中等宽度指定的轮廓要厚。
Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style outlineWidth Property 
    </title> 
  
    <style> 
        .elem { 
            outline-style:dashed; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style OutlineWidth</b> 
      
    <p class="elem"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and  
        explained computer science and programming 
        articles, quizzes and interview questions. 
        The portal also has dedicated GATE preparation 
        and competitive programming sections. 
    </p> 
      
    <button onclick="changeWidth()"> 
        Change outlineWidth 
    </button> 
      
    <!--Script to change the outline width -->
    <script> 
        function changeWidth() { 
            elem = document.querySelector('.elem'); 
            elem.style.outlineWidth = 'thick'; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

length:用于以长度单位定义轮廓宽度。
Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style outlineWidth Property 
    </title> 
  
    <style> 
        .elem { 
            outline-style:dashed; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style OutlineWidth</b> 
      
    <p class="elem"> 
        GeeksforGeeks is a computer science portal 
        with a huge variety of well written and  
        explained computer science and programming 
        articles, quizzes and interview questions. 
        The portal also has dedicated GATE preparation 
        and competitive programming sections. 
    </p> 
      
    <button onclick="changeWidth()"> 
        Change outlineWidth 
    </button> 
      
    <!--Script to change the outline width -->
    <script> 
        function changeWidth() { 
            elem = document.querySelector('.elem'); 
            elem.style.outlineWidth = '10px'; 
        } 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

initial:它用于将此属性设置为其默认值。
Example:

<!DOCTYPE html> 
<html> 
      
<head> 
    <title> 
        DOM Style outlineWidth Property 
    </title> 
  
    <style> 
        .elem { 
            outline-style:dashed; 
            outline-width:4px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
    </h1> 
      
    <b>DOM Style OutlineWidth</b>

相关用法

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