小码哥的IT人生

HTML DOM borderTop 属性

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

HTML DOM borderTop 属性

定义和用法

borderTop 属性在一行声明中为上边框设置所有的属性。

语法:

Object.style.borderTop=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.borderTop="thick solid #0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()"
value="Change top border" />
<p id="p1">This is a paragraph</p>
</body>
</html>

TIY

完整实例【borderTop - 改变上边框的宽度、样式和颜色】:

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

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

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

苏公网安备 32030202000762号

© 2021-2024