HTML DOM Figcaption对象(Figcaption Object)

Figcaption对象代表了HTML文档中的figcaption元素

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

如何访问Figcaption对象?

使用getElementById()访问Figcaption元素。

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

如何创建Figcaption对象

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

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

标准属性及事件

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

使用例1

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

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

<figure>

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

<figcaption id="myFigCap">图像的标题</figcaption>

</figure>

<p>点击以下按钮,给标题改变颜色</p>

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

<script>

function myFc() {

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

x.style.color = "red";

}

</script>

</body>

</html>

使用例2

HTML+Javascript文件

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

</head>

<body>

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

<figure id="myFigure">

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

</figure>

<p>点击以下按钮,给以上图像创建一个标题</p>

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

<script>

function myFc() {

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

var t = document.createTextNode("图像的标题");

x.appendChild(t);

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

y.appendChild(x);

}

</script>

</body>

</html>

关联内容