Code on this page only works in IE. (Tested in IE 7 and 6) The previous page show code for Firefox and Safari and the last page presents cross browser techniques.

Introduction

IE doesn't implement the DOM2 HTML Element interface in a way that it is scriptable. So the technique used in Firefox and Safari cannot be used in IE. Instead, IE's behaviors can be used. The code is implemented in an HTC file and applied with the IE CSS attribute behavior.

Example:
Click the buttons below to hide or show this block or see coordinates.
Hide Call
document.getElementById('example').hide();
Show Call
document.getElementById('example').show();
Get coordinates
var xy = document.getElementById('example').getCoordinates();
alert("The coordinate are:\n" + xy.x1 + ", " + xy.y1 + " to " + xy.x2 + ", " + xy.y2);

  Extending HTML Elements in IE

To demonstrate the technique, three methods are added to the HTML elements: show, hide, and getCoordinates. These are the same functions used in the Firefox example. The difference here is they are added in an HTC file.

<public:component>
    <attach for="element" />
    <public:method name="show" internalname="_show"/>
    <public:method name="hide" internalname="_hide"/>
    <public:method name="getCoordinates" internalname="_getCoordinates"/>
    <script type="text/javascript">
		function _show() {element.style.visibility = "visible";}
        function _hide() {element.style.visibility = "hidden";}
        function _getCoordinates() {
            var xy = {};
            xy.x1 = element.offsetLeft;
            xy.y1 = element.offsetTop;
            xy.x2 = element.offsetLeft + element.offsetWidth;
            xy.y2 = element.offsetTop + element.offsetHeight;
            return xy;
        }
    </script>
</public:component>

One more step is needed. That is to bind code in the HTC file the HTML elements.

<!--[if IE]>
    <style type="text/css">
        * {behavior: url(ie_ext_element.htc);}
    </style>
<![endif]-->

This produces the same result as the code for Firefox and Safari.

  Extending Specific Element Types

Limiting the new methods to specific elements is easier to understand as CSS selectors are used to identify the element. The code snippet below adds the new methods only the div elements.

<!--[if IE]>
    <style type="text/css">
        div {behavior: url(ie_ext_element.htc);}
    </style>
<![endif]-->

With IE HTCs, the elements to which the behaviors are add can be identified by class, ID, or any other selector recognized by IE.

References:
Using HTML Components to Implement DHTML Behaviors...
HTC Reference
behavior Attribute | behavior Property
Element.prototype in Internet Explorer