DOM: removeAttribute() in Internet Explorer

[Alvaro G Vicario]

I need to dynamically remove the onmouseout attribute from a link in an
HTML page. I've written code that uses the removeAttribute() method,
believing it's a W3C standard. While it works fine in Mozilla, it doesn't
work as expected in Internet Explorer 6.

If I call the method several times, the first execution returns true and
the rest return false, so it's apparently doing something. However, the
attribute is still there: hovering the mouse triggers the code and
getAttribute() displays the old value.

How should I do it?

Example code:

<p><a id="foo" onmouseout="this.style.color='green'"
href="http://www.google.es">Example link</a></p>

<pre>
<script language="JavaScript" type="text/javascript"><!--
var obj=document.getElementById('foo');
document.writeln(obj.getAttribute('onmouseout'));
obj.removeAttribute('onmouseout');
document.writeln(obj.getAttribute('onmouseout'));
//--></script>
</pre>



Mozilla prints:

this.style.color='green'
null

And link remains unchanged.


Explorer prints:

function anonymous()
{
this.style.color='green'
}
function anonymous()
{
this.style.color='green'
}

And link gets green.

Thank you in advance,

 

[Martin Honnen]

I need to dynamically remove the onmouseout attribute from a link in an
HTML page. I've written code that uses the removeAttribute() method,
believing it's a W3C standard. While it works fine in Mozilla, it doesn't
work as expected in Internet Explorer 6.

Unfortunately IE impements some methods with the same name of a method
specified in the W3C DOM but IE's implementation is not what the W3C DOM
specifies. get/setAttribute are in particular broken in IE when it comes
to W3C DOM compliance.

If I call the method several times, the first execution returns true and
the rest return false, so it's apparently doing something. However, the
attribute is still there: hovering the mouse triggers the code and
getAttribute() displays the old value.

How should I do it?

<p><a id="foo" onmouseout="this.style.color='green'"
href="http://www.google.es">Example link</a></p>

var obj=document.getElementById('foo');

In client-side script in HTML pages if you want to remove an event
handler function assigned as oneventname (in HTML or per script) your
best cross-browser way is
elementObject.oneventname = null;
e.g.
obj.onmouseout = null;

This does not completely remove the attribute but it removes the event
handler.

 

[Alvaro G Vicario]

*** Martin Honnen wrote/escribió (Mon, 14 Mar 2005 14:17:07 +0100):

In client-side script in HTML pages if you want to remove an event
handler function assigned as oneventname (in HTML or per script) your
best cross-browser way is
elementObject.oneventname = null;
e.g.
obj.onmouseout = null;

This does not completely remove the attribute but it removes the event
handler.

Works like a charm and it looks cross-browser enough. Thanks a lot.