HTML DOM Label 对象
JavaScript基础 2022-05-13 16:21:01小码哥的IT人生shichen
HTML DOM Label 对象
Label 对象
Label 对象表示 HTML <label> 元素。
访问 Label 对象
您可以通过使用 getElementById() 来访问 <label> 元素：
var x = document.getElementById("myLabel");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h3>演示如何访问 LABEL 元素</h3>
<label id="myLabel" for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>
<p>点击按钮来获得 label 所绑定元素的 id。</p>
<p id="demo"></p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x = document.getElementById("myLabel").htmlFor;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
创建 Label 对象
您可以通过使用 document.createElement() 方法来创建 <label> 元素：
var x = document.createElement("LABEL");
完整实例：
<!DOCTYPE html>
<html>
<body>
<h3>演示如何访问 LABEL 元素</h3>
<form id="myForm" action="form_action.asp">
<input type="radio" name="sex" id="male" value="male">
</form>
<p>点击按钮来创建 LABEL 元素。</p>
<button onclick="myFunction()">试一下</button>
<script>
function myFunction()
{
var x = document.createElement("LABEL");
var t = document.createTextNode("Male");
x.setAttribute("for", "male");
x.appendChild(t);
document.getElementById("myForm").insertBefore(x,document.getElementById("male"));
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
Label 对象属性
| 属性 | 描述 |
|---|---|
| control | 返回被标记的控件。 |
| form | 返回对包含 label 的表单的引用。 |
| htmlFor | 设置或返回 label 的 for 属性值。 |
