javascript取网页DOM自定义属性值和设置自定义属性值的通用方法
2012-03-27 14:08
861 查看
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; }
示例代码如下:
<input type="button" value="click me" clickCount="0" onClick="test(this);" /> <input type="button" value="click me" clickCount="0" onClick="test2(this);" /> <script type="text/javascript"> function test(obj){ if(obj.attributes['clickCount'].nodeValue === '0') { alert('你已点击,还有一次机会!'); obj.attributes['clickCount'].nodeValue = "1"; } else { alert('机会用完,此按钮将不可用!') obj.disabled = true; } } function test2(obj){ if(obj.getAttribute('clickCount') === '0') { alert('你已点击,还有一次机会!'); obj.setAttribute('clickCount', '1'); } else { alert('机会用完,此按钮将不可用!') obj.disabled = true; } } </script>
[/code]
相关文章推荐
- javascript取网页DOM自定义属性值和设置自定义属性值的通用方法
- javascript取网页DOM自定义属性值和设置自定义属性值的通用方法
- javascript取网页DOM自定义属性值和设置自定义属性值的通用方法
- 【JavaScript】DOM(二)获取元素+设置属性的六种方法
- JavaScript DOM概述(获取节点的方法/节点的访问关系/节点创建添加删除复制/属性获取设置删除)
- javaScript DOM编程常用的方法与属性
- JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
- JavaScript DOM 创建元素并设置属性
- s 点击a标签 获取a的自定义属性方法_javascript技巧
- JavaScript DOM 中创建元素 用 setAttribute()函数设置属性值
- Javascript创建自定义对象 创建Object实例添加属性和方法
- JavaScript DOM 方法 属性
- 如何设置JavaScript某个自定义的对象属性为只读
- JavaScript DOM 创建元素并设置属性
- 【前端学习笔记】深入学习Javascript:DOM和BOM的方法及属性总结
- vue的iview列表table render函数设置DOM属性值的方法
- javascript设置和获取cookie的通用方法
- Javascript之内置的DOM操作属性和方法
- javascript createElement()创建input不能设置name属性的解决方法
- JavaScript DOM 中创建元素 用 setAttribute()函数设置属性值