JavaScript HTML DOM Style outlineStyle 属性

• 

  outlineStyle 属性

  outlineStyle属性设置或返回元素周围的轮廓样式。轮廓是元素周围的线。它显示在元素的边缘周围。但是，它与border属性不同。轮廓不是元素尺寸的一部分，因此元素的宽度和高度属性不包含轮廓的宽度。

  在div元素周围添加“solid”轮廓：

  document.getElementById("myDiv").style.outlineStyle = "solid";

  尝试一下
• 

  浏览器支持

  项	IE/Edge	Chrome	FireFox	Safari	Opera
  属性
  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	设置这个属性为默认值。 阅读有关initial信息
  inherit	从其父元素继承此属性。 阅读有关inherit的信息

• 

  技术细节

  项目	描述
  默认值：	none
  返回值：	一个字符串，表示元素轮廓的样式
  CSS版本	CSS2

• 

  更多例子

  更改div元素的轮廓样式：

  document.getElementById("myDiv").style.outlineStyle = "solid";
  

  尝试一下

  返回div元素的轮廓样式：

  document.getElementById("myDiv").style.outlineStyle = "solid";
  

  尝试一下

  展示所有不同的值：

  var listValue = selectTag.options[selectTag.selectedIndex].text;
  document.getElementById("myDiv").style.outlineStyle = listValue;
  

  尝试一下
• 

  相关页面

  CSS教程：CSS 轮廓

  CSS参考：CSS outline-style 属性

  HTML DOM 参考：outline 属性