小码哥的IT人生

HTML DOM borderBottom 属性

JavaScript基础 2022-06-08 14:24:39小码哥的IT人生shichen

HTML DOM borderBottom 属性

定义和用法

borderBottom 属性在一个声明中为下边框设置所有的属性。

语法:

Object.style.borderBottom=borderWidth borderStyle borderColor
描述
borderWidth 设置边框的宽度。
  1. thin
  2. medium
  3. thick
  4. length
borderStyle 设置边框的样式。
  1. none
  2. hidden
  3. dotted
  4. dashed
  5. solid
  6. double
  7. groove
  8. ridge
  9. inset
  10. outset
borderColor 设置边框的颜色。
  1. color-name
  2. color-rgb
  3. color-hex
  4. transparent

实例

下面的例子设置下边框:

<html>
<head>
<style type="text/css">
p {border: thin dotted #FF0000}
</style>
<script type="text/javascript">
function changeBorder()
{
document.getElementById("p1").style.borderBottom="thick solid blue";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()"
value="Change bottom paragraph border" />
<p id="p1">This is a paragraph with a border</p>
</body>
</html>

TIY

完整实例【borderBottom - 改变元素的下边框】:

<html>
<head>
<style type="text/css">
p
{
border: thin dotted #FF0000;
}
</style>
<script type="text/javascript">
function changeBorder()
{
document.getElementById("p1").style.borderBottom="thick solid blue";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change bottom border" />
<p id="p1">This is a paragraph with a border</p>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024