"fullscreenchange" event isn't compatible with every browser (looking for Vanilla Javascript fix)

Question

I am using the "fullscreenchange" event to apply the css I would like by adding or removing an ID (#showFullscreen) that will take dominance over the css already applied to .fullscreen.

    var fullscreen = document.getElementsByClassName("fullscreen");

    document.addEventListener("fullscreenchange", function() {
        if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
            fullscreen[0].setAttribute("id", "showFullscreen");
        } else if (!document.fullscreenElement || !document.webkitFullscreenElement || !document.mozFullScreenElement || !document.msFullscreenElement) {
            fullscreen[0].removeAttribute("id", "showFullscreen");
        }
     });

How can I get this code to work across all browsers using vanilla javascript?