HTML DOM Figure 对象
htmlweb developmentfront end technology更新于 2025/9/24 22:36:17
HTML DOM Figure 对象用于表示 HTML <figure> 元素。我们可以使用 figure 对象动态创建和访问 figure 元素。
语法
以下是创建 Figure 对象的语法 −
var p = document.createElement("FIGURE");
示例
以下是创建 Figure 对象的方法 −
<!DOCTYPE html>
<html>
<head>
<script>
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "https://www.cainiaomax.com/servlets/images/servletsmini-logo.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}
</script>
</head>
<body>
<h2>HTML DOM figure object</h2>
<button onclick="createFigure()">CREATE</button><br><br>
</body>
</html>
输出
这将产生以下输出 −
点击"创建"按钮时 −
在上面的例子中 −
我们首先创建了一个 CREATE 按钮，当用户点击该按钮时，它将执行 createFigure() 函数 −
<button onclick="createFigure()>>CREATE>/button><br><br>
createFigure() 函数使用 document 对象的 createElement() 方法创建图形元素。使用 setAttribute() 方法设置 figure 元素的 id，最后使用 appendChild() 方法将其附加到文档主体。然后，我们创建另一个元素 img，用于将图像放入 figure 元素中。
使用 setAttribute() 方法设置 img 元素的 src、width、height 和 alt 值。最后，使用 appendChild() 方法将 img 元素作为 figure 元素的子元素附加 −
function createFigure(){
var fig = document.createElement("FIGURE");
fig.setAttribute("id", "Figure1");
document.body.appendChild(fig);
var i = document.createElement("IMG");
i.setAttribute("src", "EiffelTower.jpg");
i.setAttribute("width", "250");
i.setAttribute("height", "200");
i.setAttribute("alt", "Eiffel Tower");
fig.appendChild(i);
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
