Javascript event on CSS style change from block to none

Question

Is there a pure Javascript event (no jQuery) that is fired when I change the CSS style of my div from block to none. I was under the impression I can catch that via "onBlur" but looks like I cannot!

Please advise!

Answer 1

There are no DOM events triggered for visibility changes.

The best you can do is always use the same function to adjust the block's visibility instead of changing it's style each time.

Old pattern:

function doSomething() {
    alert("I'm doing something!");
    myBlock.style.display = "block";
}

function doSomethingElse() {
    alert("I'm doing something else now!");
    myBlock.style.display = "none";
}

New pattern:

function doSomething() {
    alert("I'm doing something!");
    toggleMyBlock(true);
}

function doSomethingElse() {
    alert("I'm doing something else now!");
    toggleMyBlock(false);
}

function toggleMyBlock(show) {
    if (show) {
        // code here for what would be your 'it became visible' event.
    } else {
        // code here for what would be your 'it became invisible' event.
    }
    myBlock.style.display = show ? "block" : "none";
}