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队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
JS将秒换成时分秒实现代码
Sep 03 Javascript
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
May 12 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
浅析VUE防抖与节流
Nov 24 Vue.js
几种设置表单元素中文本输入框不可编辑的方法总结
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
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
JavaScript通过select动态更换图片的方法
2015/03/23 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
RequireJs的使用详解
2017/02/19 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
2019/05/18 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
2020/06/01 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python抓取豆瓣图片并自动保存示例学习
2014/01/10 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Python中optparser库用法实例详解
2018/01/26 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
python与mysql数据库交互的实现
2020/01/06 Python
python实现微信打飞机游戏
2020/03/24 Python
Matplotlib 折线图plot()所有用法详解
2020/07/28 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
企业员工辞职信范文
2015/05/12 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
mysql中between的边界,范围说明
2021/06/08 MySQL