📌  相关文章
📜  HTML | DOM 样式 outlineWidth 属性(1)

📅  最后修改于: 2023-12-03 14:41:50.176000             🧑  作者: Mango

HTML | DOM 样式 outlineWidth 属性

简介

HTML | DOM 样式 outlineWidth 属性是用于设置外边框的宽度的属性。该属性不同于 border-width 属性，它只能设置非替换元素的轮廓线形式的宽度。

语法

设置元素的 outline-width 属性的语法如下：

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

参数说明：

  • thin：设置为1px。
  • medium：设置为3px。
  • thick：设置为5px。
  • length：设置一个具体的数字，表示要设置的宽度。可用单位有 px，em，rem。
  • initial：将属性设置为它的默认值。
  • inherit：从父元素继承该属性。
示例
<!DOCTYPE html>
<html>
<head>
	<title>HTML | DOM 样式 outlineWidth 属性示例</title>
	<style>
		#example {
			border: 1px solid black;
			outline: solid red 10px;
			padding: 10px;
			margin: 10px;
			background-color: lightblue;
			width: 300px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div id="example">
		<p>这是一个示例文字。</p>
		<p>这是一个示例文字。</p>
		<p>这是一个示例文字。</p>
	</div>
	<script>
		document.getElementById("example").style.outlineWidth = "thick";
	</script>
</body>
</html>

在这个示例里，我们首先将 <div> 元素的外边框（border）设置为 1px 的黑色实线。然后，我们使用了 outline 属性设置了轮廓线，它的颜色是红色，宽度是 10px。最后，我们在 <script> 标签里使用 style.outlineWidth 属性将其宽度设置为 thick，结果该元素的轮廓线宽度就变成了 5px，也就是 thick 的默认值。

浏览器支持性

outlineWidth 属性在所有主流浏览器中均得到支持。

总结

HTML | DOM 样式 outlineWidth 属性是外边框的宽度属性。由于它只能用于非替换元素，因此它主要用于对文本内容的轮廓线进行控制。它的常见取值有 thin、medium、thick 和 length。如果设置为 length，则可以设置一个具体的数字，表示要设置的宽度。