为什么我的 Jquery 元素调整大小不起作用？

Question

我在 FF、Safari 和 Chrome 中使用 CSS 的 resize 属性来调整 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); };

而且，你原来使用的函数是不完整的。虽然它不影响您的具体情况，但我冒昧地改进了它。在这里找到它： http://jsfiddle.net/mihaibirsan/NCs5J/

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

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

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

我希望这会有所帮助！如果您满意，请采纳答案！我这样做是为了积分！