HTML Style border属性; 设置或返回边线的总体设定

使用border属性设置或返回边线的总体设定。

border属性对应着CSS文档中的 border属性。

border属性可以设置或返回以下属性的值(顺序不分先后):

  • border-width
  • border-style
  • border-color
border属性语法及技术细节
语法
设置值Object.style.border="宽度 样式 颜色|initial|inherit"
返回值Object.style.border
技术细节
默认值不指定
返回值字符,元素边线的宽度、样式、颜色
CSS版本css1
属性的值及其说明
说明
宽度 设置边线的宽度。
样式 设置边线的样式
颜色 设置边线的颜色
initial 保持原有属性的值。
inherit 继承母元素的设定。

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<div id="myD">这是一个 div元素</div>

<br>

<button type="button" onclick="myFc()">添加边线</button>

<script>

function myFc() {

document.getElementById("myD").style.border = "3px solid #0000FF";

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<style>

#myD {

border: 3px solid blue;

}

</style>

</head>

<body>

<div id="myD">一个div元素</div>

<br>

<button type="button" onclick="myFc()">改变边线</button>

<script>

function myFc() {

document.getElementById("myD").style.border = "thin dotted red";

}

</script>

</body>

</html>

使用例3

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<div id="myD" style="border:1px solid red;">一个 div元素</div>

<br>

<button type="button" onclick="myFc()">返回border属性的值</button>

<script>

function myFc() {

alert(document.getElementById("myD").style.border);

}

</script>

</body>

</html>

不同浏览器的对应情况

属性
border 4.0 1.0 1.0 1.0 3.5

注:上表中的数字为开始支持该当属性的浏览器版本。

关联内容