`
zu14
  • 浏览: 442634 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类

JavaScript/Js脚本处理html元素的自定义属性(兼容Firefox和IE)

阅读更多
<script type="text/javascript"><!-- google_ad_client = "pub-5834986413902221"; /* 336x280, 创建于 09-1-11 */ google_ad_slot = "3738213453"; google_ad_width = 336; google_ad_height = 280; //--> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

HTML元素,属性已经十分丰富了。但是,在某些场合下,也会显得捉襟见肘,这时候自定义属性就发挥了十分关键的作用。

Html元素的自定义属性,使用起来,十分方便,例如:

假设我们现在需要限制,这个按钮,只能点击2次,然后就失效了。

 

通常的实现方式,是可以利用全局变量的形式来记录点击次数,但我们这里用自定义属性来实现这个功能,展示一下自定义属性的优势;我们对上面的button做一下改造:

<input value="Click me, baby!" type="button" clickCount=”0” />

可以看到,我为这个button 增加了一个自定义属性 clickCount, 并将初始值设为 0;下面我们来写实现功能的js代码:

1. 给 button 增加click事件的处理

<input value="Click me, baby!" type="button" 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,所以,这个代码,就是具有兼容性的代码了,嘿嘿

分享到:
评论

相关推荐

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

    主要是对JavaScript/Js脚本处理html元素的自定义属性解析(亲测兼容Firefox与IE)进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    javascript firefox兼容ie的dom方法脚本

    document.all){ //zzcv的ff ie兼容脚本 /*脚本没有解决的问题及处理: 2.IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象. 解决方法:统一使用[]获取集合类对象. 3.IE下,可以使用获取常规...

    大名鼎鼎SWFUpload- Flash+JS 上传

    在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 Race-conditions when files are cached 兼容ASP.Net Forms SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展 ...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    精通JavaScript

    Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将该实例复制到C:\...

    ExtAspNet_v2.3.2_dll

    -如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...

    编辑器 KindEditor 4.0.4

    兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera ver 4.0.4 (2011-12-11) 新增: 阿拉伯语语言包。 改善: 上传文件时显示上传中提示。 改善: JSON解析失败时,通过弹出层显示服务器返回...

    javascript输入CD-KEY自动分割的代码

    开发过程中用写的一个脚本,记录下来以备后用与他用,其中attributes["max"].nodeValue是取HTML自定义的 max属性(兼容Firefox和IE)

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    &lt;br&gt;2007/6/18 Version 3.1.1 beta &lt;br&gt;Updates: 1) 修正编辑器不支持Opera浏览器的BUG,现在已经能完美支持IE5+、Opera、FireFox等主流浏览器。 2) 修正控件在设计模式时出现找不到config配置文件但...

    SwipeBox:点击关闭滑动框

    Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone。 ##用法 ###Javascript 在 head 标签中或 body 结束标签之前包含 jquery 和 swipebox 脚本。 &lt; script src =" lib/jquery-1.9.0.js...

    仿Windows XP风格的右键多级联动菜单

    内容索引:脚本资源,Ajax/JavaScript,仿XP,右键菜单 JavaScript+CSS仿windows xp风格的右键多级联动菜单,可自定义样式和触发程序,兼容IE/火狐、chrome、safari等众多浏览器,做的风格还挺像,鼠标在方框区域右键...

    基于JQUERY的菜单栏插件

    花生米AJAX-UI系列之:基于JQUERY的GooMenubar工具栏类UI控件0.1版 特点: 可定义四个边框有没有显示 ... 需要结合GooContextMenu控件0.2版来使用. ... 经测试,兼容IE6--IE8,Firefox,chrome浏览器。

    asprain论坛Access版 v1.0 build 20100228

    对IE6、IE7、IE8、firefox、Chrome、Saferi、Opera七种主流浏览器有良好的兼容性。可以轻松松换肤,制作个性皮肤也很方便,只要修改几个css就可以了。 asprain论坛使用了大量的ajax效果,不仅能够很有效地节省数据...

    javapms门户网站源码

    javascript脚本基于jquery和javascript标准编写,有效的解决了js跨浏览器的问题,系统可以在IE6、IE7、IE8、IE9、FireFox、Chrome、Opera、Safari浏览器下平稳运行。 1.5. 强大的中文采集与检索技术 系统支持强大的...

    浏览器端如何使用Less

    受益于JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。  本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则...

    Google Chrome 6.0.451.0 Dev 版(一个由Google公司开发的网页浏览器)

     竞争对手方面,Firefox 从24.35%微涨至24.59%,Safari 虽然推出了支持扩展的 5.x,但是还是从 4.77% 跌至 4.72,IE 也是从59.95%小跌至59.69%。 注意: 此版本为 谷歌浏览器(Google Chrome) 6.0.447.0 Dev 版。

Global site tag (gtag.js) - Google Analytics