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属性，我无法真正找到错误。如果您要尝试测试代码，那么在样式标记中也需要这些代码。

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

我希望这有帮助！如果它让你高兴，请接受答案！我这样做是为了积分！

为什么我的Jquery元素不能调整大小？

1 个答案: