JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)


Posted in Javascript onNovember 25, 2013

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;
}
Javascript 相关文章推荐
Javascript 学习书 推荐
Jun 13 Javascript
javascript 面向对象编程基础 多态
Aug 21 Javascript
JQUERY表单暂存功能插件分享
Feb 23 Javascript
js严格模式总结(分享)
Aug 22 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 Javascript
js实现秒表计时器
Dec 16 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
几种设置表单元素中文本输入框不可编辑的方法总结
Nov 25 #Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 #Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 #Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 #Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 #Javascript
javascript 实现字符串反转的三种方法
Nov 23 #Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 #Javascript
You might like
图解上海144收音机
2021/03/02 无线电
用php和MySql来与ODBC数据连接
2006/10/09 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
JavaScript实现动态创建CSS样式规则方案
2014/09/06 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
JavaScript获得表单target属性的方法
2015/04/02 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
python之super的使用小结
2018/08/13 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
什么是Smart Navigation?
2016/07/03 面试题
《小猫刮胡子》教学反思
2014/02/21 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
毕业典礼邀请函
2015/01/31 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
5行Python代码实现一键批量扣图
2021/06/29 Python