Javascript 以编程方式测试特定css属性的兼容性（调整textarea上的支持大小）

我正在跨浏览器网站上实现一个可调整大小的文本区域。现在在FF/Chrome/Safari中，以下内容：

  textarea{
     resize: both;
  }

工作起来很有魅力。一点点的嗅探让我来到了这里：

在那里我得知Opera和IE不支持这个属性

没什么大不了的，下面的javascript可以处理检测，通过jquery UI调用

resizeable（）

包装在其中以实现功能：

 if ((navigator.userAgent.indexOf('Trident') != -1) || (navigator.userAgent.indexOf('MSIE') != -1) || (navigator.userAgent.indexOf('Opera') != -1)){

---

然而，我不喜欢显式的浏览器检查。有没有办法以编程方式测试对特定css属性的支持？

检查textarea的样式声明是否返回未定义的“调整大小”，如果返回，则不支持：

var txtarea = document.createElement('textarea');

if (txtarea.style.resize != undefined) {
    //resize is supported
}

---

这里有一个测试方法。它在Chrome中返回OK，在Opera中也返回OK，我在Opera中测试了CSS属性“resize”，它似乎工作得很好，因此Opera支持它。正如预期的那样，测试在IE中返回“不支持”。

在上述adeneo的帮助下，最终的通用解决方案如下：

 var shims_property_for_element, supports_property_on_element;

 shims_property_for_element = function(prop, elem, method, attrs) {
   if (!supports_property_on_element(prop, elem)) {
     return $(function() {
       var numEles;
       $(elem)[method](attrs);
       numEles = $(elem).length;
       return window.setInterval((function() {
         if ($(elem).length !== numEles) {
           numEles = $(elem).length;
           return $(elem)[method](attrs);
         }
       }), 1000);
     });
   }
 };

 supports_property_on_element = function(prop, elem) {
   var e, len, vendors;
   e = document.createElement(elem);
   if (prop in e.style) {
     return true;
   }
   return false;
 };

在这种特殊情况下，将其转换为以下调用：

 shims_property_for_element('resize', 'textarea', "resizable")

---

@adeneo-天哪，看看你在不同浏览器中测试这一功能并找出如何检查CSS属性等得到的巨大响应。这只是通过屋顶人？？？？？谢谢你的巨大响应；）确实如此，我根据您的输入构建了一个更通用的解决方案（见上文）。。。谢谢@AbrahamP-是的，我认为一个更通用的函数返回一些东西会是一个更好的选择，你在那里做的看起来不错。这基本上就是你测试CSS属性的方式，所以我认为这也应该适用，但通常你只是检查文档，在这种情况下需要一个文本区域，因为文档从来没有这种样式，并且总是返回未定义的。