custom property on html tag not recognised by ie9 and firefox

Question

I am using prototype 1.7.0. I am having a HTML code like the below mentioned tag. I have added a custom method onhide.

<div id="showButton" onclick="javascript:hello();" onhide="onNamehide()">show</div>

Now when I click, $('showButton').onhide evaluates to true is displayed in IE8 and false in IE9, firefox.

 function hello(){
   if($('showButton').onhide){
     alert("I am able to find onhide function");
   } else {
     alert("Sorry, I am not able to find onhide function");
   }
 }   

Can someone please explain to me this?

Answer 1

See Element#hasAttribute

if ($('showButton').hasAttribute('onhide')) {

---

The reason that testing for onhide only sometimes works is complex and subtle. Technically the object returned by $('showButton') is a javascript representation of the DOM, it is not the HTML element per se. Older browsers would confuse the issue by treating HTML attributes as DOM properties, but setting a DOM property didn't always set the HTML attribute. As browsers grow closer to the specification the difference is becoming more accurate.

Try to write code to the specification rather than implementation by using functions like getAttribute and setAttribute (abstracted in Prototype as readAttribute and writeAttribute for the sake of cross-browserness).