IE10标准模式不支持Htc(Html Components)已经是千真万确的事情了，如果浏览器升级到了IE10，那么原有的Htc代码要怎么办呢?道路有二：

　　1.将htm页面设置为IE6、 IE7、 IE8等完全兼容Htc的文档模式，这样在IE10下还是能跑Htc的，IE9对Htc已经有所抛弃了，所以不推荐设置为IE9的文档模式，具体见下文：

　　IE6-IE9兼容性问题列表及解决办法_补充之四：HTC (Html Components) 功能逐渐被IE抛弃

　　2.如果必须要将页面设置为IE10标准模式，那么，没得选择，就只能升级或重写Htc代码了。

　　自定义属性

　　首先，先建好一个ie10_field_htc.htc，里面就放一个自定义属性VisibilityOrHidden和它的get， put方法，这两个方法里本来可以写很多逻辑的，但简单起见，就各写了一句，代码如下：

　　 function putVisibilityOrHidden(vValue) { element.style.visibility= vValue } function getVisibilityOrHidden() { return element.style.visibility}

　　然后，再来一个简单的ie10_field_htc.css文件，代码如下：

　　INPUT{behavior: url(ie10_field_htc.htc);}

　　最后，就是ie10_field_htc.htm文件了，这里写的IE=9，为的是在IE10下能正常跑这个功能：

　　

 

　　有了这三个文件，一运行，就可以看到，因为我们设置了自定义的属性VisibilityOrHidden，所以页面里的input框不显示了，到现在为止，一切正常。

　　这时，将IE=9改为IE=10,然后再打开IE10浏览器一看，不出我们意料，这个页面果然就不行了，下面我们就开始升级重写htc里的代码。

　　这里用到了JS中的Object.defineProperty了，推荐资料：Object.defineProperty 函数 (JavaScript),http://technet.microsoft.com/zh-cn/sysinternals/dd548687

　　总之，用了它，就可以给任何一个JavaScript对象甚至dom元素添加扩展属性了。

　　废话不讲了，直接上代码，再创建一个ie10_field_htc.js文件，代码如下：

　　var Method_VisibilityOrHidden = {get: function () {return this.style.visibility},set: function (val) {this.style.visibility = val}}//inputif (!HTMLInputElement.prototype.hasOwnProperty("VisibilityOrHidden")) {Object.defineProperty(HTMLInputElement.prototype, "VisibilityOrHidden", Method_VisibilityOrHidden);}

　　当然，除Input外，象TextArea，Select这些元素如果也需要这个自定义属性，那么，就再添加爱一个HTMLTextAreaElement和HTMLSelectElement就好了，其他元素以此类推即可。

　　然后，将刚才的htm修改下，去掉引用htc的CSS，换成这个JS，修改后代码如下：

　　

 

　　事件

　　下面是一个网上流传很广的htc例子，例如取名：ie10_htc.htc

　　 /*其实，换成下面的写法也可以*//**//**/

　　对应的ie 10_htc.htm代码：

　　 　　

把鼠标放在这里

 

　　在IE9下运行木有问题，但是到IE9改为IE10，然后用IE10浏览就会发现效果没有了。

　　升级这段htc的方法倒也不难，如果用纯JS来写，可以这样：

　　 　　

把鼠标放在这里

 

　　因为不再依赖htc了，所以在IE9, IE10下浏览，都没问题，效果又回来了，就是代码有点冗长了。

　　如果换做用JQuery.js重写：

　　 　　

把鼠标放在这里

 

　　感觉清爽很多了，同时，颜色不再支持数字，要用英文表示了，这样也好，一目了然，知道是什么意思。

　　通过自定义属性 和事件可以总结出，虽然ms不再支持htc了，但迁移它到js上的代价并不太大，基本上原来的代码都能用，只不过htc中有些旧的写法要换成新写法就好!

　　来自：博客园

　　(责任编辑：leonlee07)