小码哥的IT人生

HTML DOM borderLeft 属性

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

HTML DOM borderLeft 属性

定义和用法

borderLeft 属性在一个声明中为左边框设置所有属性。

语法:

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

TIY

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

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