如何调用js来改变label 的值呢

JavaScript06

如何调用js来改变label 的值呢,第1张

1、首先新建一个html文件,写入演示用的html结构,输入一个标准的label和input组合的标签,然后做一个button给button一个getLabel的点击事件:

2、在下方新建script标签,在里面写js代码,首先获取label的dom元素,之后调用 innerHTML改变值就可以了:

3、打开浏览器,此时label的值是Male:

4、点击下面的按钮,label的值就变成了Male。总结js改变标签内容就是先获取标签的dom,在用innerHTML改变内容就可以了:

首先要明确下面几点:

1、动态添加的radio必须有name属性,同一组的radio其name属性一定相同(所谓同一组就是说多个radio中只有一个被选中,其他自动恢复为未选中状态);

2、如果要关联label,则radio必须设置id属性,且id必须具有唯一性(不但radio之间的id不能相同,整个页面所有元素的id都不能相同);

3、label的for属性必须与所关联的radio相同。

下面是个已通过测试的例子:

<button id=btn>添加radio</button>

<div id=test></div>

<script>

var id=100

window.onload=function(){

   document.getElementById("btn").onclick=function(){

      var ipt=document.createElement("input")

      ipt.name="r"

      ipt.type="radio"

      ipt.id="r"+id

      document.getElementById("test").appendChild(ipt)

      var lbl=document.createElement("label")

      lbl.setAttribute("for","r"+id)

      lbl.innerHTML="r"+id

      document.getElementById("test").appendChild(lbl)

      id++

   }

}

</script>

如果把radio放到label内,也可以不设置radio的id属性和label的for属性:

<button id=btn>添加radio</button>

<div id=test></div>

<script>

window.onload=function(){

   document.getElementById("btn").onclick=function(){

      var lbl=document.createElement("label")

      lbl.innerHTML="r"+parseInt(Math.random()*1000)

      var ipt=document.createElement("input")

      ipt.name="r"

      ipt.type="radio"

      lbl.appendChild(ipt)

      document.getElementById("test").appendChild(lbl)

   }

}

</script>

label标签使用方法:

1、<label for="userName">用户名:</label><input type="text" id="userName"/>

2、<label>用户名:<input type="text"/></label>

当在单选或多选里使用时,还会出现一种视觉效果,这也是一种友好的方式。<label><input type="radio" />性别</label>

我们都知道一个完整的表单是由表单标签<form></form>与其中包裹的各种表单控件组成的,那么LABEL标签就是一种常见的表单控件了。

在HTML里,每一种HTML标签都有自己的意义,在做页面的时候选择适合的标签,少使用DIV,Span这些无语义的标签,只有在无法确定使用什么标签才使用DIV。

扩展资料:

在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。

1、文本标记语言源程序的文件扩展名默认使用htm(磁盘操作系统DOS限制的外语缩写为扩展名)或html(外语缩写为扩展名),以便于操作系统或程序辨认,除自定义的汉字扩展名。

在使用文本编辑器时,注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。

2、超文本标记语言源程序为文本文件,其列宽可不受限制,即多个标记可写成一行,甚至整个文件可写成一行;若写成多行,浏览器一般忽略文件中的回车符(标记指定除外);

对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号“&nbsp(注意此字母必须小写,方可空格)”表示非换行空格;

表示文件路径时使用符号“/”分隔,文件名及路径描述可用双引号也可不用引号括起。

3、标记符中的标记元素用尖括号括起来,带斜杠的元素表示该标记说明结束;大多数标记符必须成对使用,以表示作用的起始和结束;

标记元素忽略大小写,即其作用相同,但完整的空格可使用特殊符号“&nbsp(注意此字母必须小写,方可空格)”;

许多标记元素具有属性说明,可用参数对元素作进一步的限定,多个参数或属性项说明次序不限,其间用空格分隔即可;一个标记元素的内容可以写成多行。

4、标记符号,包括尖括号、标记元素、属性项等必须使用半角的西文字符,而不能使用全角字符。

5、HTML注释由"<!--"号开始,由符号”-->“结束结束,例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号,即被标识为注释,不予显示。

参考资料:百度百科-HTML-相关要求