Question

我已经经历了多个示例，并实现了与示例所述相同的行为。

加载页面后，如果dom元素的样式发生变化，我需要触发一个方法。

即使我在浏览器控制台中更改了任何内容，也应触发样式更改事件。该事件将显示无和显示块。

在我的代码中，如果在浏览器控制台中进行更改，则不会触发更改方法。

这就是我的尝试：

＆＃13;

(function() {
    var ev = new $.Event('style'),
        orig = $.fn.css;
    $.fn.css = function() {
        var ret = orig.apply(this, arguments);
        $(this).trigger(ev);
        return ret;
    }
})();


$('p').bind('style', function(e) {
    console.log($(this).attr('style'));
});

＆＃13;

p {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p> test </p>

＆＃13;

Answer 1

您可以使用MutationObserver：

演示：

＆＃13;

public class TreeNode<T extends Comparable>{
    private T contents;
    private TreeNode<T> parent;
    private TreeNode<T> leftChild;
    private TreeNode<T> rightChild;
    private int level;

    public TreeNode()
    {
        //added
        //parent=null;
        //leftChild=null;
        //rightChild=null;
        //level=0;
    }
    public TreeNode(T data){
    contents=data;
    this.parent=parent;
}

    public TreeNode(T data, TreeNode parent)
    {
        contents = data;
        this.parent = parent;
    }        

    public void setLeftChild(TreeNode node)
    {
        this.leftChild = node;
    }        

    public void setRightChild(TreeNode node)
    {
        this.rightChild = node;
    }        

    public boolean isContentEquals(T data)
    {
        return 0 == getContents().compareTo(data);
    }

    /**
     * @return the contents
     */
    public T getContents() {
        return contents;
    }

    /**
     * @param contents the contents to set
     */
    public void setContents(T contents) {
        this.contents = contents;
    }

    /**
     * @return the parent
     */
    public TreeNode getParent() {
        return parent;
    }

    /**
     * @param parent the parent to set
     */
    public void setParent(TreeNode parent) {
        this.parent = parent;
    }

    /**
     * @return the leftChild
     */
    public TreeNode getLeftChild() {
        return leftChild;
    }

    /**
     * @return the rightChild
     */
    public TreeNode getRightChild() {
        return rightChild;
    }
     /**
     * Given an object T contentToSearch, this method returns
     * the node that stores the contentToShare or null if not found on the current tree
     * @return the node
     */
    public TreeNode findNodeOnTree(T contentToSearch)
    {
        List<TreeNode> nodes = new LinkedList();
        nodes.clear();
        nodes.add(this);

        while(!nodes.isEmpty())
        {
            TreeNode current = nodes.remove(0);
            if(current.isContentEquals(contentToSearch))
            {
                return current;
            }

            if(current.leftChild != null)
            {
                nodes.add(current.leftChild);
            }   

            if(current.rightChild != null)
            {
                nodes.add(current.rightChild);
            }    
        }

        return null;
    }        

    /**
     * @return the level
     */
    public int getLevel() {
        return level;
    }

    /**
     * @param level the level to set
     */
    public void setLevel(int level) {
        this.level = level;
    }

}

＆＃13;

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        var oldDisplay = (mutation.oldValue + '').match(/display:\s*(\w*)/);
        oldDisplay = oldDisplay ? oldDisplay[1] : '';
        if (oldDisplay !== mutation.target.style.display) {
            console.log('element', mutation.target.id, 
                    'style.display=', mutation.target.style.display);
        }
    });    
});
 
// attach the observer to the elements of interest:
$('p').each(function () {
    observer.observe(this, { 
        attributes: true, 
        attributeFilter: ['style'],
        attributeOldValue: true
    });
});

// test it, by changing style.display through button clicks:
$('button').click(function() {
    $('p').toggle(); // show/hide
});

＆＃13;

如何在更改dom元素样式后调用函数Javascript / jquery

1 个答案: