一 处理HTML元素的自定义属性
HTML元素,属性已经十分丰富了。但是,在某些场合下,也会显得捉襟见肘,这时候自定义属性就发挥了十分关键的作用。
Html元素的自定义属性,使用起来,十分方便,例如:
<input type=”button” value=”Click Me, Baby!” />
假设我们现在需要限制,这个按钮,只能点击2次,然后就失效了。
通常的实现方式,是可以利用全局变量的形式来记录点击次数,但我们这里用自定义属性来实现这个功能,展示一下自定义属性的优势;我们对上面的button做一下改造:
<input type=”button” value=”Click Me, Baby!” clickCount=”0” />
可以看到,我为这个button 增加了一个自定义属性 clickCount, 并将初始值设为 0;下面我们来写实现功能的js代码:
1. 给 button 增加click事件的处理
<input type=”button” value=”Click Me, Baby!” clickCount=”0” onclick=”customAttributeDemo(this);" />
2. 我们来写 customAttributeDemo(obj) 这个函数
对于IE来讲,使用自定义属性非常简单,因为IE自动将自定义属性解析到了DOM中,和标准属性没有任何区别,IE下的版本:
function customAttributeDemo(obj)
{
if (obj.clickCount === '0')
{
obj.clickCount = '1';
}
else
{
obj.disabled = true;
}
}
上面的代码在 FireFox 下将失效,因为FireFox对自定义属性的使用,限制更高,只能使用 attributes[] 集合来访问,FireFox 下的代码:
function customAttributeDemo(obj)
{
if (obj.attributes['clickCount'].nodeValue === '0')
{
obj.attributes['clickCount'].nodeValue = '1';
}
else
{
obj.disabled = true;
}
}
上面的代码,也适用于IE,所以,这个代码,就是具有兼容性的代码了,嘿嘿
感谢小秦网友的交流,他给出了 getAttribute 和 setAttribute 的方法:
function customAttributeDemo(obj)
{
if (obj.getAttribute('clickCount') === '0')
obj.setAttribute('clickCount', '1');
else
obj.disabled = true;
}
前面说过为HTML元素添加自定义的属性,是通过手动在HTML控件中加上,其实可以在javascript中动态添加:如有一文本框:
<input type="text" id="txtInput" name="txtInput" value="自定义文本">
如想增加idvalue属性(值为”自定义值”),可以在javascript中这样写:
var txt = document.getElementById("txtInput");
txt.setAttribute("idvalue","自定义值");
setAttribute中第一个参数是指明自定义属性的名称,第二个参数是初始值
代码如下:
<html>
<head>
<title>用javascript添加控件自定义属性</title>
<script language="javascript">
function addCustomAttribute()
{
var txt = document.getElementById("txtInput");
txt.setAttribute("idvalue","自定义值");
}
function showIdValue()
{
var txt = document.getElementById("txtInput");
alert(txt.attributes["idvalue"].nodeValue);
}
</script>
</head>
<body onload="addCustomAttribute();">
<input type="text" id="txtInput" name="txtInput" value="自定义文本">
<input type="button" value="显示idValue" onclick="showIdValue();">
</body>
</html>
原文出自:http://www.cnblogs.com/pricks/archive/2010/02/10/1667108.html
相关推荐
HTML:自定义标签属性 标签属性的引用使用规则
HTML5如何添加自定义标签属性(data-自定义属性).zip
jQuery给HTML标签添加自定义属性.zip
//在page中只有3个属性是已知的,1,一共多少记录,2,一页显示多少记录,3,以及返回的结果集 //1.重新给page分布内容 setPage(page); //2.输出html out.print(getHtml(page)); //3.输出js out.print(getJs...
option自定义属性的用处,可以推广到其他的html标签
xml文件中可以自由的使用自定义标签,html文件中同样可以使用自定义标签,但有几个注意事项:必需设置<html>标签的xmlns属性。例如,可以这样声明:<html xmlns:article>。 这是因为html文件有一个默认...
而且关于Attribute和Property的区别也让人十分头痛,在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义...
对HTML JS没有影响。可以写n多个属性。只要定义的属性名别跟原有默认属性同名就行。这种自定义的属性,浏览器不会去解析
正如 HTML5 语法中所阐述的,元素可以包含属性...…属性只能在起始标签中指定,绝对不能用在结束标签中。 HTML5 属性不区分大小写,可以全部大写或者混合使用,尽管最常见的约定是始终使用小写。 标准属性下面列出的属
如果能在自己的网页中使用...只要在这里申明了我要使用的webjx这一自定义标签,语法分析器就会认识这个标签并赋予我定义的属性了。 下面我们来定义一下这个标签所要使用的属性了,在标签中加入下面的语句即: we
大家总是习惯使用HTML标签添加自定义属性来存储和操作数据,所以才在HTML5规范里增加了一个自定义data属性,这样使用更便捷,一起跟随小编过来看看吧
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据,这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情
java实现docx转html,自定义标签属性,然后根据自定义的标签属性,将html转为word,可支持普通段落,图片、表格、单元格合并、文本字体、字体大小、段落对齐方式、删除线、下划线、粗体、斜体、背景颜色等
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是...
2.首先在web.xml中定义自定义标签加载的引用,两个属性分别是引用的URI和加载路径 <?xml version=1.0 encoding=UTF-8?> <web-app version=2.5 xmlns=http://java.sun.com/xml/ns/javaee xmlns:xsi=...
前段时间写了一个基于html5 video的视频播放器,从起初的对其不了解,然后到能够写一个基本完善的自定义播放器。在这个过程中,对video标签的属性,方法,事件有了个全面的认识。下面分类列出来一下。 <video>...
编写了一个js插件,要使用该插件需要先在html中引入该插件Js,然后再添加一个script标签,在里面调用,需要的朋友可以看看
系统支持无限级分类、采集、生成静态HTML、ajax 自定义表单 系统标签说明: 的标签结构形如(ror标签): #{…/} 或 #{…}***{/} 内嵌标签: 标签: ##.../# 如同#{…/} 在#{…/}中使用 字段值:[$$$/] 其中 … ...
html5手机登录表单验证代码是一款自定义标签属性的手机登录表单验证特效。