检测元素是否已通过javascript调整大小？ [英] Detect if an element has been resized via javascript?

问题描述

是否可以简单地向某些元素添加事件侦听器以检测其高度或宽度是否已修改？我想这样做，而不使用类似的密集：

Is it possible to simply add event listeners to certain elements to detect if their height or width have been modified? I'd like do this without using something intensive like:

$(window).resize(function() { ... });

理想情况下，我想绑定到特定的元素：

Ideally, I'd like to bind to specific elements:

$("#primaryContent p").resize(function() { ... });

看起来像在窗口上使用resize处理程序是唯一的解决方案，但这感觉像过度杀戮。

It seems like using a resize handler on the window is the only solution, but this feels like overkill. It also doesn't account for situations where an element's dimensions are modified programatically.

推荐答案

这里是一个jQuery插件与 watch 和 unwatch 方法可以观察元素的特定属性。它作为一个jQuery对象的方法被调用。它在浏览器中使用内置功能，在DOM更改时返回事件，对于不支持这些事件的浏览器使用 setTimeout（）。

Here is a jQuery plugin with watch and unwatch methods that can watch particular properties of an element. It is invoked as a method of a jQuery object. It uses built-in functionality in browsers that return events when the DOM changes, and uses setTimeout() for browsers that do not support these events.

手表函数的一般语法如下：

The general syntax of the watch function is below:

$("selector here").watch(props, func, interval, id);

• props 是以逗号分隔的字符串，您希望
  手表（例如width，height）。


• func 是一个回调函数，传递参数 watchData，index ，其中 watchData 是指 {id：itId，props：[]，func：func，vals：[]} ， index 是changed属性的索引。 此是指已更改的元素。


• interval c $> setInterval（）。


• / code>是一个可选的id，用于标识此观察者，用于从jQuery对象中删除特定的观察者。


• props is a comma-separated string of the properties you wish to watch (such as "width,height").
• func is a callback function, passed the parameters watchData, index, where watchData refers to an object of the form { id: itId, props: [], func: func, vals: [] }, and index is the index of the changed property. this refers to the changed element.
• interval is the interval, in milliseconds, for setInterval() in browsers that do not support property watching in the DOM.
• id is an optional id that identifies this watcher, and is used to remove a particular watcher from a jQuery object.

unwatch 函数的一般语法如下：

The general syntax of the unwatch function is below:

$("selector here").unwatch(id);







• id 是一个可选的id，标识要删除的此监视器。如果未指定 id ，则会移除该对象中的所有观察者。


• id is an optional id that identifies this watcher to be removed. If id is not specified, all watchers from the object will be removed.

对于那些好奇的插件的代码转换如下：

For those who are curious, the code of the plugin is reproduced below:

$.fn.watch = function(props, func, interval, id) {
    /// <summary>
    /// Allows you to monitor changes in a specific
    /// CSS property of an element by polling the value.
    /// when the value changes a function is called.
    /// The function called is called in the context
    /// of the selected element (ie. this)
    /// </summary>    
    /// <param name="prop" type="String">CSS Property to watch. If not specified (null) code is called on interval</param>    
    /// <param name="func" type="Function">
    /// Function called when the value has changed.
    /// </param>    
    /// <param name="func" type="Function">
    /// optional id that identifies this watch instance. Use if
    /// if you have multiple properties you're watching.
    /// </param>
    /// <param name="id" type="String">A unique ID that identifies this watch instance on this element</param>  
    /// <returns type="jQuery" /> 
    if (!interval)
        interval = 200;
    if (!id)
        id = "_watcher";

    return this.each(function() {
        var _t = this;
        var el = $(this);
        var fnc = function() { __watcher.call(_t, id) };
        var itId = null;

        if (typeof (this.onpropertychange) == "object")
            el.bind("propertychange." + id, fnc);
        else if ($.browser.mozilla)
            el.bind("DOMAttrModified." + id, fnc);
        else
            itId = setInterval(fnc, interval);

        var data = { id: itId,
            props: props.split(","),
            func: func,
            vals: []
        };
        $.each(data.props, function(i) { data.vals[i] = el.css(data.props[i]); });
        el.data(id, data);
    });

    function __watcher(id) {
        var el = $(this);
        var w = el.data(id);

        var changed = false;
        var i = 0;
        for (i; i < w.props.length; i++) {
            var newVal = el.css(w.props[i]);
            if (w.vals[i] != newVal) {
                w.vals[i] = newVal;
                changed = true;
                break;
            }
        }
        if (changed && w.func) {
            var _t = this;
            w.func.call(_t, w, i)
        }
    }
}
$.fn.unwatch = function(id) {
    this.each(function() {
        var w = $(this).data(id);
        var el = $(this);
        el.removeData();

        if (typeof (this.onpropertychange) == "object")
            el.unbind("propertychange." + id, fnc);
        else if ($.browser.mozilla)
            el.unbind("DOMAttrModified." + id, fnc);
        else
            clearInterval(w.id);
    });
    return this;
}

这篇关于检测元素是否已通过javascript调整大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！