<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)进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
document.all){ //zzcv的ff ie兼容脚本 /*脚本没有解决的问题及处理: 2.IE下,可以使用()或[]获取集合类对象;Firefox下,只能使用[]获取集合类对象. 解决方法:统一使用[]获取集合类对象. 3.IE下,可以使用获取常规...
在FireFox中,如果窗口的滚动条没有回滚到顶部,那么Flash无法加载 Race-conditions when files are cached 兼容ASP.Net Forms SWFUpload v2 延续了SWFUpload的设计目标,将UI分离以交给开发人员控制和后续扩展 ...
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将该实例复制到C:\...
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera ver 4.0.4 (2011-12-11) 新增: 阿拉伯语语言包。 改善: 上传文件时显示上传中提示。 改善: JSON解析失败时,通过弹出层显示服务器返回...
开发过程中用写的一个脚本,记录下来以备后用与他用,其中attributes["max"].nodeValue是取HTML自定义的 max属性(兼容Firefox和IE)
<br>2007/6/18 Version 3.1.1 beta <br>Updates: 1) 修正编辑器不支持Opera浏览器的BUG,现在已经能完美支持IE5+、Opera、FireFox等主流浏览器。 2) 修正控件在设计模式时出现找不到config配置文件但...
Chrome, Safari, Firefox, Opera, IE9+, IOS4+, Android, windows phone。 ##用法 ###Javascript 在 head 标签中或 body 结束标签之前包含 jquery 和 swipebox 脚本。 < script src =" lib/jquery-1.9.0.js...
内容索引:脚本资源,Ajax/JavaScript,仿XP,右键菜单 JavaScript+CSS仿windows xp风格的右键多级联动菜单,可自定义样式和触发程序,兼容IE/火狐、chrome、safari等众多浏览器,做的风格还挺像,鼠标在方框区域右键...
花生米AJAX-UI系列之:基于JQUERY的GooMenubar工具栏类UI控件0.1版 特点: 可定义四个边框有没有显示 ... 需要结合GooContextMenu控件0.2版来使用. ... 经测试,兼容IE6--IE8,Firefox,chrome浏览器。
对IE6、IE7、IE8、firefox、Chrome、Saferi、Opera七种主流浏览器有良好的兼容性。可以轻松松换肤,制作个性皮肤也很方便,只要修改几个css就可以了。 asprain论坛使用了大量的ajax效果,不仅能够很有效地节省数据...
javascript脚本基于jquery和javascript标准编写,有效的解决了js跨浏览器的问题,系统可以在IE6、IE7、IE8、IE9、FireFox、Chrome、Opera、Safari浏览器下平稳运行。 1.5. 强大的中文采集与检索技术 系统支持强大的...
受益于JavaScript,LESS可以在客户端上运行(IE6+、Webkit、Firefox),也可以在服务端运行(Node.js、Rhino)。 本质上,LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则...
竞争对手方面,Firefox 从24.35%微涨至24.59%,Safari 虽然推出了支持扩展的 5.x,但是还是从 4.77% 跌至 4.72,IE 也是从59.95%小跌至59.69%。 注意: 此版本为 谷歌浏览器(Google Chrome) 6.0.447.0 Dev 版。