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 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
event.srcElement 用法笔记e.target
Dec 18 Javascript
javascript下数值型比较难点说明
Jun 07 Javascript
jquery一句话全选/取消全选
Mar 01 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
jquery的each方法使用示例分享
Mar 25 Javascript
jQuery easyui刷新当前tabs的方法
Sep 23 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
微信小程序使用swiper组件实现层叠轮播图
Nov 04 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
基于JavaScript实现十五拼图代码实例
Apr 26 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
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP中static关键字以及与self关键字的区别
2015/07/01 PHP
PHP重定向与伪静态区别
2017/02/19 PHP
PHP哈希表实现算法原理解析
2020/12/11 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
js实现的牛顿摆效果
2015/03/31 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
Mac中Python 3环境下安装scrapy的方法教程
2017/10/26 Python
python 动态调用函数实例解析
2019/10/21 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
Python的logging模块基本用法
2020/12/24 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
Java程序员面试题
2016/09/27 面试题
英语道歉信范文
2014/01/09 职场文书
销售简历自我评价
2014/01/24 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
2014年评职称工作总结
2014/11/20 职场文书
手术室护士个人总结
2015/02/13 职场文书
死亡诗社观后感
2015/06/05 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python
Python 详解通过Scrapy框架实现爬取CSDN全站热榜标题热词流程
2021/11/11 Python