5

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

  textarea{
     resize: both;
  }

奇迹般有效。一点点嗅探把我带到了这里：

http://www.w3schools.com/cssref/css3_pr_resize.asp

我在哪里了解到 Opera 和 IE 不支持此属性。

没什么大不了的，以下 javascript 可以处理检测，其中包含一个 jquery UI 调用来resizable()包装功能：

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

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

4

2 回答 2

5

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

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

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

这是一个FIDDLE来测试它。它在 Chrome 和 Opera 中返回 OK，我在 Opera 中测试了 CSS 属性“resize”，它似乎工作得很好，所以它在 Opera 中受支持。正如预期的那样，测试在 IE 中返回“不支持”。

于 2013-02-20T19:35:40.677 回答
2

在上面的 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")
于 2013-02-20T20:34:32.143 回答