5

クロスブラウザー Web サイトにサイズ変更可能なテキストエリアを実装しています。FF/Chrome/Safari では、次のようになりました。

  textarea{
     resize: both;
  }

魅力のように機能します。少しスニッフィングした結果、ここにたどり着きました：

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

Opera と IE がこのプロパティをサポートしていないことを知った場所。

resizable()大したことではありません。次の JavaScript は、機能のためにラップされた jquery UI 呼び出しを使用して、検出を処理できます。

 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 に答える