找到html标记对应的脚本属性
程序员文章站
2024-03-01 08:13:46
javascript中可以创建以及引用一个元素,进而通过这个元素来取得或者设置属性。然而一个元素的属性却不是和脚本中使用的属性一一对应的。一个较偏僻的属性,甚至google...
javascript中可以创建以及引用一个元素,进而通过这个元素来取得或者设置属性。然而一个元素的属性却不是和脚本中使用的属性一一对应的。一个较偏僻的属性,甚至google也很难找到其对应的脚本属性。今天我就遇到了这个问题:我需要创建一个label标记来对应一个复选框,使得点击这个label标记也能选中复选框。这是很常用的技术,比如如下的代码:
<input type="checkbox" id="cbtop"/>
<label for="cbtop">置顶</label>
就能够使得点击“置顶”两个字时也能选中复选框。
在正常情况下,这段代码是直接写到文件里的,很容易完成。当是我需要通过脚本创建,就遇到了问题,一般脚本属性和标记中写的属性是一样的,如链接标记a的目标属性href就保持一致。但因为for是javascript中的保留字,不能作为属性。我在网上找了很久也没找到for对应的脚本属性是什么,于是就酝酿出下面的办法来找到一个标记属性对应的脚本属性,现在就以找label的for属性对应的脚本属性为例:
<label for="abcd" id="lbltest">test</label>
<script type="text/javascript">
var lbl=document.getelementbyid("lbltest");
for(var p in lbl){
var s=eval("lbl."+p);
if(s=="abcd")alert(p);
}
</script>
原理是这样,我先写一个html标记到文档中,然后给要找的属性赋一个唯一值,例子中是给label的for属性复制"abcd",然后通过javascript引用这个元素,并且遍历它的所有属性,如果一个属性的值等于abcd,那么就可以认为这个属性的名称就是其对应的脚本属性。就是通过这个方法,发现了label的for属性对应的脚本属性应该是:htmlfor。嘿嘿,还是比较怪异的哦。类似的方法还可以应用在找css的脚本属性上,大家不妨试试。
<input type="checkbox" id="cbtop"/>
<label for="cbtop">置顶</label>
就能够使得点击“置顶”两个字时也能选中复选框。
在正常情况下,这段代码是直接写到文件里的,很容易完成。当是我需要通过脚本创建,就遇到了问题,一般脚本属性和标记中写的属性是一样的,如链接标记a的目标属性href就保持一致。但因为for是javascript中的保留字,不能作为属性。我在网上找了很久也没找到for对应的脚本属性是什么,于是就酝酿出下面的办法来找到一个标记属性对应的脚本属性,现在就以找label的for属性对应的脚本属性为例:
<label for="abcd" id="lbltest">test</label>
<script type="text/javascript">
var lbl=document.getelementbyid("lbltest");
for(var p in lbl){
var s=eval("lbl."+p);
if(s=="abcd")alert(p);
}
</script>
原理是这样,我先写一个html标记到文档中,然后给要找的属性赋一个唯一值,例子中是给label的for属性复制"abcd",然后通过javascript引用这个元素,并且遍历它的所有属性,如果一个属性的值等于abcd,那么就可以认为这个属性的名称就是其对应的脚本属性。就是通过这个方法,发现了label的for属性对应的脚本属性应该是:htmlfor。嘿嘿,还是比较怪异的哦。类似的方法还可以应用在找css的脚本属性上,大家不妨试试。
推荐阅读
-
找到html标记对应的脚本属性
-
报错:属性或方法“xxxx”对应的数据没有找到
-
找到html标记对应的脚本属性
-
html超级链接标记A的TARGET属性详解_HTML/Xhtml_网页制作
-
HTML表格标记教程(29):单元格的亮边框色属性BORDERCOLORLIGHT_HTML/Xhtml_网页制作
-
HTML表格标记教程(21):行的边框色属性BORDERCOLOR_HTML/Xhtml_网页制作
-
CSS中100%对应父节点的什么属性?_html/css_WEB-ITnose
-
html超级链接标记A的TARGET属性详解_HTML/Xhtml_网页制作
-
HTML表格标记教程(22):行的亮边框色属性BORDERCOLORLIGHT_HTML/Xhtml_网页制作
-
HTML表格标记教程(20):行的背景色属性BGCOLOR_HTML/Xhtml_网页制作