JavaScript/Js脚本处理html元素的自定义属�?兼容Firefox和IE)转蝲

chunkyo — Wed, 24 Jun 2009 01:24:00 GMT

HTML元素�Q�属性已�l�十分丰富了。但是，在某些场合下�Q�也�?x��)显得捉襟见肘，�q�时�?strong>自定义属�?/strong>��发挥了十分关键的作用�?/p>

Html元素的自定义属性，使用��h��Q�十分方便，例如�Q?/p>

假设我们现在需要限�Ӟ��q�个按钮�Q�只能点�?�ơ，然后��失效了�?/strong>

通常的实现方式，是可�?em>利用全局变量的�Ş�?/strong>来记录点�?y��n)L��敎ͼ�但我们这里用自定义属�?/strong>来实现这个功能，展示一下自定义属性的优势�Q�我们对上面的button做一下改造：(x��)

clickCount=”0” />

可以看到�Q�我��个button 增加了一个自定义属�?clickCount�Q?�q�将初始��D��?0�Q�下面我们来写实现功能的js代码�Q?/p>
1. �l?button 增加click事�g的处�?/p>
clickCount=”0” onclick=”customAttributeDemo(this);" />

2. 我们来写 customAttributeDemo(obj) �q�个函数

对于IE来讲�Q��用自定义属性非常简单，因�ؓ(f��)IE自动��自定义属性解析到了DOM中，和标准属性没有�Q何区别，IE下的版本�Q?/p>

function customAttributeDemo(obj)
{
if (obj.clickCount === '0')
{
obj.clickCount = '1';
}
else
{
obj.disabled = true;
}
}

上面的代码在 FireFox 下将失效�Q�因为FireFox对自定义属性的使用�Q�限制更高，只能使用 attributes[] 集合来访问，FireFox 下的代码�Q?/p>

function customAttributeDemo(obj)
{
if (obj.attributes['clickCount'].nodeValue === '0')
{
obj.attributes['clickCount'].nodeValue = '1';
}
else
{
obj.disabled = true;
}
}

上面的代码，也适用于IE�Q�所以，�q�个代码�Q�就是具有兼�Ҏ(gu��)��的代码了，嘿嘿

感谢��秦�|�友的交��，他给��Z�� getAttribute �?setAttribute 的方法：(x��)

function customAttributeDemo(obj)
{
if (obj.getAttribute('clickCount') === '0')
obj.setAttribute('clickCount', '1');
else
obj.disabled = true;
}

chunkyo 2009-06-24 09:24 发表评论

亚洲av色香蕉一区二区三区蜜桃,亚洲中文字幕无码一区二区三区,亚洲综合免费视频

JavaScript/Js脚本处理html元素的自定义属�?兼容Firefox和IE)转蝲