HTML DOM 按钮的 name 属性
htmlweb developmentfront end technology更新于 2025/9/22 23:08:17
HTML DOM 按钮的 name 属性与 <button> 元素的 name 属性关联。name 属性用于设置或返回按钮 name 属性的值。name 属性用于在表单中使用 JavaScript 选择元素。
语法
以下是语法 −
设置 name 属性 −
buttonObject.name = name
此处，name 属性值用于表示按钮的名称。
示例
让我们看一个按钮 name 属性的示例 −
<!DOCTYPE html>
<html>
<body>
<button id="button1" name="btn1">BUTTON</button>
<p>Click the button below and change the above button name.</p>
<button onclick="change()">CHANGE</button>
<p id="Sample"></p>
<script>
function change() {
document.getElementById("button1").name="SECOND BUTTON";
var x=document.getElementById("button1").name;
document.getElementById("Sample").innerHTML="The new button name is "+x;
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击"更改"按钮 −
在上面的例子中 −
我们首先创建了一个按钮，id 为 “button1”，名称为 “btn1”
<button id="Button1>>BUTTON</button>
然后，我们创建了"更改"按钮，该按钮在点击时执行 change() 方法。
<button onclick="change()>CHANGE</button>
change() 函数获取 id 为"button1"的按钮元素，并将其 name 属性值更改为"SECOND BUTTON"。然后将按钮的 name 值赋给变量 x，并最终显示在 id 为"Sample"的段落中。
function change() {
document.getElementById("button1").name="SECOND BUTTON";
var x=document.getElementById("button1").name;
document.getElementById("Sample").innerHTML="The new button name is "+x;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
