数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚学
法律学HTML DOM 图形对象
HTML DOM 图形对象用于表示 HTML <figure>元素。我们可以使用图形对象动态创建和访问图形元素。
语法
以下是创建图形对象的语法 -
var p = document.createElement("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://tutorialspoint.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() 函数使用文档对象的 createElement() 方法创建图形元素。使用 setAttribute()，我们设置图形元素的 id，最后使用 appendChild() 方法将其追加到文档的主体。然后，我们创建另一个元素 img，以将图像放入图形元素中。
使用 setAttribute() 方法，我们设置 img 元素的 src、宽度、高度和 alt 值。最后，img 元素通过 appendChild() 方法追加为图形元素的子元素 -
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);
}
更新日期：2019 年 8 月 19 日
94 次浏览
广告