HTML DOM Fieldset 对象

htmlweb developmentfront end technology更新于 2024/5/29 9:16:17

HTML DOM Fieldset 对象代表 <fieldset>元素。

属性

以下是 Fieldset 对象的属性 −

属性	描述
disabled	设置或返回 fieldset 是否已禁用
form	返回包含给定 fieldset 的表单的引用。
name	设置或返回 fieldset 的 name 属性值。
type	返回 fieldset 元素类型。

语法

以下是语法 −

创建 fieldset 元素 −

var p = document.createElement("FIELDSET");

示例

让我们看一个 HTML DOM Fieldset 对象的示例 −

<!DOCTYPE html>
<html>
<head>
<script>
   function createField() {
      var f = document.createElement("FIELDSET");
      var txt = document.createTextNode("FIELDSET element created");
      f.appendChild(txt);
      document.body.appendChild(f);
   }
</script>
</head>
<body>
<h2>Fieldset object example</h2>
<p>Create a fieldset element by clicking on below button</p>
<button onclick="createField()">CREATE</button> <br><br>
</body>
</html>

输出

这将产生以下输出 −

点击"创建"按钮时 −

在上面的例子中 −

我们首先创建了一个"创建"按钮，当用户点击该按钮时，它将执行 createField() 函数 −

<button onclick="createField()>CREATE</button>

createField() 函数使用文档对象的 createElement() 方法创建一个 <fieldset> 元素，并将其赋值给变量 f。然后，它使用 createTextNode() 方法创建一个文本节点，并使用 appendChild() 方法创建 <fieldset> 元素的文本子节点。最后，将 fieldset 元素及其文本子节点作为子元素添加到文档主体中 −

function createField() {
   var f = document.createElement("FIELDSET");
   var txt = document.createTextNode("FIELDSET element created");
   f.appendChild(txt);
   document.body.appendChild(f);
}