HTML DOM 样式 borderTopStyle 属性
htmlweb developmentfront end technology更新于 2024/3/10 22:36:17
HTML DOM borderTopStyle 属性用于设置或返回元素的顶部边框样式。
以下是语法 −
设置 borderTopStyle 属性 −
object.style.borderTopStyle = 值
以上属性的解释如下 −
| 值 | 描述 |
|---|---|
| None | 这是默认值，表示无边框。 |
| Hidden | 这与"无"相同，但仍会占用边框空间。它基本上是透明的，但仍然在那里。 |
| Dotted | 这定义了一个点线边框。 |
| Dashed | 这定义了一个虚线边框。 |
| Solid | 这定义了一个实线边框。 |
| Double | 这定义了一个双线边框 |
| Groove | 这定义了一个三维凹槽边框，与脊线相反。 |
| Ridge | 这定义了一个3D 脊状边框，与凹槽相反 |
| Inset | 这定义了一个 3D 内嵌边框，其效果看起来像浮雕。它产生的效果与内嵌相反。 |
| outset | 这定义了一个 3D 内嵌边框，其效果看起来像浮雕。它产生与 inset 相反的效果。 |
| initial | 用于将此属性设置为初始值。 |
| inherit | 继承父级属性值 |
我们来看一个 borderTopStyle 属性的示例
示例
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-top: 8px solid dodgerblue;
border-top-style: groove;
}
</style>
<script>
function changeTopStyle(){
document.getElementById("DIV1").style.borderTopStyle="dashed";
document.getElementById("Sample").innerHTML="The Top border style is now changed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div Top border style by clicking the below button</p>
<button onclick="changeTopStyle()">Change Top Style</button>
<p id="Sample"></p>
</body>
</html>
输出
点击"更改顶部样式"按钮 −
在上面的例子中 −
我们首先创建了一个 id 为"DIV1"的 div，并根据其 id 为其应用了 CSS 样式。该样式主要包含 border-top 样式及其宽度 −
#DIV1{
width:300px;
height:100px;
border-top: 8px solid dodgerblue;
border-top-style: groove;
}
<div id="DIV1">SOME SAMPLE TEXT</div>
然后，我们创建了一个按钮 “更改顶部样式”，当用户点击该按钮时，它将执行 changeTopStyle() 方法 −
<button onclick="changeTopStyle()">Change Top Style</button>
changeTopStyle() 方法使用 getElementById() 获取 id 为 “DIV1” 的 div 元素，并将其 borderTopStyle 样式属性设置为 dashed。然后，此更改将反映在 id 为 “Sample” 的段落中，通过使用其 innerHTML 属性显示给定的文本。
function changeTopStyle(){
document.getElementById("DIV1").style.borderTopStyle="dashed";
document.getElementById("Sample").innerHTML="The Top border style is now changed";
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
