为什么我的Jquery元素调整大小无法正常工作？

Question

我正在使用CSS的resize属性来调整FF，Safari和Chrome中div元素的大小，但是由于该属性在IE和Opera中不起作用，因此如果使用了这两种浏览器之一，我将不得不查找备份，因此我结合使用Jquery和javascript来询问我在网上找到的功能，在这里： 浏览器调整支持代码的大小 。 不幸的是，这是我担心无法在测试中正常工作的代码。

这是我的测试代码： 我的代码

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;
    }
}

此外，它还需要与脚本位于同一文件夹中的图像（最好是10x10或更小）用作调整div元素大小的图标，但调整大小不仅不起作用，而且图像甚至无法显示，这就是导致我认为检查CSS的变量是引起问题的原因，因为没有它，图像就永远不会附加在div元素内。 但是，由于我没有编写代码，也找不到其他代码来检查是否支持特定的CSS属性，因此我无法真正找到错误。 如果您要尝试测试代码，则还需要在样式标签中包含以下代码。

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

任何帮助修复该代码将不胜感激！

Answer 1

该代码在很多方面都是错误的，包括语法和方法。

首先，您应该使用Modernizr之类的库来测试功能支持。 无论如何，如果要使用此代码，请尝试不要仅更改其中的一部分。 unsupported的功能失败，因为您没有更改所有返回点。 将来，如果确实需要使用新的命名，请包装原始函数。 就像unsupported = function (x) { return !supported(x); }; unsupported = function (x) { return !supported(x); };

此外，您使用的原始功能不完整。 尽管它不会影响您的特定案例，但我还是有自由加以改进。 在这里找到： http : //jsfiddle.net/mihaibirsan/NCs5J/

其次，调整大小的代码真的很混乱。 当您将函数作为参数传递时，不要忘记关闭函数调用的括号！ 另外，使用全局变量绝对是不好的，要不惜一切代价避免！ 此外，由于您使用的是jQuery，为什么不将功能包装在一个漂亮的jQuery小功能中？ 您可以在这里找到代码： http : //jsfiddle.net/mihaibirsan/Rty3R/8/

因此，您的代码应归结为之前粘贴的内容（没有测试代码），加上以下代码行：

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

我希望这有帮助！ 如果您满意，请接受答案！ 我这样做是为了要点！