Jquery要素のサイズ変更が機能しないのはなぜですか？

Question

FF、Safari、Chromeのdiv要素のサイズを変更するCSSのサイズ変更プロパティを使用していますが、IEとOperaではこのプロパティが機能しないため、これらの2つのブラウザのいずれかが使用されているので、私はJqueryとjavascriptの組み合わせを使って、私がオンラインで見つけた関数を尋ねます：Browser resize support code 。残念ながら、これは動作するかどうかを確認するために私のテストで作業していないというコードです。ないことがさらにdiv要素のサイズを変更するために、アイコンとして使用するようにスクリプトと同じフォルダ内の画像、好ましくは10×10以下が必要ですMy code

var unsupported = (function() 
{ 
    var div = document.createElement('div'), 
    vendors = 'Khtml Ms O Moz Webkit'.split(' '), 
    len = vendors.length; 
    return function(prop) 
    { 
     if(prop in div.style) return true; 
     prop = prop.replace(/^[a-z]/, function(val) 
     { 
      return val.toUpperCase(); 
     }); 
     while(len--) 
     { 
      if (vendors[len] + prop in div.style) 
      { 
       return false; 
      } 
     } 
     return true; 
    }; 
})(); 
if(unsupported('resize')) 
{ 
    $("#elementtoresize").append('<img class="resizer" src="resizer.png"/>'); 
    var r = true; 
} 
$(".resizer").mousedown(function(e){ 
    if(r) 
    { 
     var Xoffset = this.parentNode.offsetLeft + this.parentNode.offsetWidth - e.clientX; 
     var Yoffset = this.parentNode.offsetTop + this.parentNode.offsetHeight - e.clientY; 
     r = false; 
    } 
    $(".resizer").mousemove(function(e){ 
     this.parentNode.offsetWidth = e.clientX + Xoffset - this.parentNode.offsetLeft; 
     this.parentNode.offsetHeight = e.clientY + Yoffset - this.parentNode.offsetTop; 
    } 
    $(".resizer").mouseup(function(){ 
     r = true; 
    } 
} 

だけでなく、：

はここに私のテストコードです画像が表示されないので、CSSをチェックする変数が問題を引き起こしていると信じています。なぜなら、画像がdiv要素内に追加されることがないからです。しかし、私はコードを書いていないので、特定のCSSプロパティがサポートされているかどうかを調べるために見つけることができる他のコードはないので、実際にエラーを見つける方法はありません。コードをテストしようとするなら、スタイルタグ内にこのコードのビットが必要です。

.resize 
{ 
z-index:2; 
position:absolute; 
right:5; 
bottom:5; 
} 

コードを修正する助けがあれば幸いです！

Answer 1

そのコードは、構文とアプローチを含む多くの点で間違っています。

まず、機能サポートをテストするために、Modernizrのようなライブラリを使用する必要があります。とにかく、このコードを使っているなら、その部分だけを変更しないでください。戻り値のすべてを変更していないため、関数unsupportedは失敗します。将来、新しい命名法を実際に使用する必要がある場合は、元の関数をラップしてください。同様にunsupported = function (x) { return !supported(x); };

また、使用した元の機能が不完全でした。あなたの特定のケースには影響しませんでしたが、私はそれを改善するために自由を取った。ここで見つける：http://jsfiddle.net/mihaibirsan/NCs5J/

第2に、サイズ変更コードは本当に面倒です。関数をパラメータとして渡すときは、関数呼び出しの括弧を閉じることを忘れないでください！また、グローバル変数を使用することは絶対に悪いことではありません。さらに、jQueryを使用しているので、素敵な小さなjQuery関数で機能をラップしてみませんか？私はこれが役に立てば幸い

if (!supported('resize')) $("#elementtoresize").resizable(); 

に

：だからあなたのコードは（テストコードなし）の前に貼り付けこまごまとに降りてくる必要があります http://jsfiddle.net/mihaibirsan/Rty3R/8/

、プラス次の行：あなたはここにコードを見つけることができます！それがあなたを喜ばせるなら、答えを受け入れてください！私はポイントのためにこれを行う！