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

Question

我正在使用 CSS 的 resize 属性在 FF、Safari 和 Chrome 中调整 div 元素的大小，但由于此属性在 IE 和 Opera 中不起作用，我不得不寻找备份以防这两种浏览器之一正在使用，所以我结合使用 Jquery 和 javascript 来询问我在网上找到的函数，此处:Browser resize support code .不幸的是，我担心这段代码无法在我的测试中运行以查看它是否可以运行。

这是我的测试代码: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;
    }
}

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

.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();

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