HTML DOM HR对象(HR Object)

HR对象代表了HTML文档中的hr元素

如何访问HR对象?

使用getElementById()访问HR元素。

var  x = document.getElementById("myHR");

如何创建HR对象

使用createElement()方法创建HR元素。

var x = document.createElement("hr");
HR对象的属性
属性 说明
align HTML5不支持该属性,使用style.textAlign代替。
设置或返回水平线上的对齐方式
color HTML5不支持该属性,使用style.color代替。
设置或返回水平线的颜色
noshade HTML5不支持该属性。
设置或返回水平线是否应该呈现纯色
size HTML5不支持该属性,使用style.height代替。
设置或返回水平线的高度
width HTML5不支持该属性,使用style.width代替。
设置或返回水平线的宽度

标准属性及事件

HR对象同时支持标准的属性事件

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问HR元素?</h3>

<hr id="myHR">

<p>点击以下按钮隐藏HR元素</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

var x = document.getElementById("myHR");

x.style.display = "none";

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建HR元素?</h3>

<hr id="myHR">

<p>点击以下按钮,创建一个HR元素</p>

<button onclick="myFc()">按钮</button>

<script>

function myFc() {

var x = document.createElement("HR");

document.body.appendChild(x);

}

</script>

</body>

</html>

关联内容