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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
JavaScript 对象链式操作测试代码
Apr 25 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
Jquery easyUI 更新行示例
Mar 06 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
原生JS实现图片轮播切换效果
Dec 15 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
JS大坑之19位数的Number型精度丢失问题详解
Apr 22 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
几种设置表单元素中文本输入框不可编辑的方法总结
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
phpQuery让php处理html代码像jQuery一样方便
2015/01/06 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
基于jQuery实现的美观星级评论打分组件代码
2015/10/30 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
vue2中filter()的实现代码
2017/07/09 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
2017/08/11 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python模拟登录之滑块验证码的破解(实例代码)
2019/11/18 Python
Python安装依赖(包)模块方法详解
2020/02/14 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
小学生学习雷锋倡议书
2014/05/15 职场文书
检讨书模板
2015/01/29 职场文书
大学生村官入党自传
2015/06/26 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
SQLServer之常用函数总结详解
2021/08/30 SQL Server