以下是一个简单的例子，演示如何使用 JavaScript 获取和操作与 <legend> 元素关联的 Legend 对象：
<!DOCTYPE html>
<html>
<head>
<title>Legend 对象示例</title>
</head>
<body>
<!-- fieldset 元素及其关联的 legend 元素 -->
<fieldset>
<legend id="fieldsetLegend">联系信息</legend>
<!-- 表单元素 -->
<label for="name">姓名：</label>
<input type="text" id="name">
<br>
<label for="email">邮箱：</label>
<input type="email" id="email">
</fieldset>
<!-- JavaScript 代码 -->
<script>
function updateLegend() {
// 获取 Legend 对象
var legendElement = document.getElementById('fieldsetLegend');
// 修改 legend 文本内容
legendElement.innerText = "个人信息";
}
</script>
<!-- 按钮触发 JavaScript 函数 -->
<button onclick="updateLegend()">更新标题</button>
</body>
</html>
在这个例子中，我们使用了 <fieldset> 元素包裹了一组表单元素，并使用 <legend> 元素为这组表单元素提供了标题。通过 JavaScript，我们使用 document.getElementById 方法获取了与 <legend> 元素关联的 Legend 对象。然后，我们通过修改 innerText 属性来更新标题文本内容。点击页面上的按钮将触发 updateLegend 函数，从而更新标题。
这只是一个简单的演示，实际应用中可以根据需要使用不同的选择器方法来获取 <legend> 元素。
转载请注明出处：http://www.zyzy.cn/article/detail/4415/HTML