小码哥的IT人生

HTML DOM border 属性

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

HTML DOM border 属性

定义和用法

border 属性在一个声明中设置所有边框属性。

语法:

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

TIY

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

<html>
<head>
<style type="text/css">
p
{ 
border: thin dotted #FF0000;
}
</style>
<script type="text/javascript">
function changeBorder()
{
document.getElementById("p1").style.border="thick solid #0000FF";
}
</script>
</head>
<body>
<input type="button" onclick="changeBorder()" value="Change 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