HTML DOM Figure对象(Figure Object)

Figure对象代表了HTML文档中的figure元素

Figcapion对象为HTML5中的新增加对象。

如何访问Figure对象?

使用getElementById()访问figure元素。

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

如何创建Figure对象

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

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

标准属性及事件

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

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何访问FIGURE元素</h3>

<figure id="myFigure">

<img src="../../images/flowerR.png" alt="花朵" width="141" height="141">

</figure>

<p>点击以下按钮,获得FIGURE元素的id值</p>

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

<p id="demo"></p>

<script>

function myFc() {

var x = document.getElementById("myFigure").id;

document.getElementById("demo").innerHTML = x;

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

<h3>如何创建FIGURE元素</h3>

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

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

<p id="demo"></p>

<script>

function myFc() {

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

x.setAttribute("id", "myFigure");

document.body.appendChild(x);

var y = document.createElement("IMG");

y.setAttribute("src", "../../images/flowerR.png");

y.setAttribute("width", "141");

y.setAttribute("width", "141");

y.setAttribute("alt", "花朵");

x.appendChild(y);

}

</script>

</body>

</html>

关联内容