Ищете более эффективный способ написать этот Javascript

Question

Есть ли лучший способ написать toggleFullscreen(). Я повторяю правила стиля в каждом браузере, который кажется очень ненужным.

function toggleFullScreen() { 
    var elem = document.getElementById("video_container"); 
    var db = document.getElementById("defaultBar"); 
    var ctrl = document.getElementById("controls"); 

    if (!document.fullscreenElement && // alternative standard method 
     !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods 
    if (document.documentElement.requestFullscreen) { 
      db.style.background ='red'; 
      ctrl.style.width = '50%'; 
      ctrl.style.left = '25%'; 
      elem.requestFullscreen(); 
     } else if (document.documentElement.mozRequestFullScreen) { 
      db.style.background ='red'; 
      ctrl.style.width = '50%'; 
      ctrl.style.left = '25%'; 
      elem.mozRequestFullScreen(); 
     } else if (document.documentElement.webkitRequestFullscreen) { 
      db.style.background ='red'; 
      ctrl.style.width = '50%'; 
      ctrl.style.left = '25%'; 
      elem.webkitRequestFullscreen(); 
     } 
    } else if (document.exitFullscreen) { 
     db.style.background ='yellow'; 
     ctrl.style.width = '100%'; 
     ctrl.style.left = '0';   
     document.exitFullscreen(); 
     } 
     else if (document.mozCancelFullScreen) { 
     db.style.background ='yellow'; 
     ctrl.style.width = '100%'; 
     ctrl.style.left = '0'; 
     document.mozCancelFullScreen(); 
     } 
     else if (document.webkitCancelFullScreen) { 
     db.style.background ='yellow'; 
     ctrl.style.width = '100%'; 
     ctrl.style.left = '0'; 
     document.webkitCancelFullScreen(); 
     } 
} 

Answer 1

из полноэкранных правил стиля применяются как только при загрузке страницы.

Это из-за этого кода:

full.addEventListener('click', toggleFullScreen(), false); 

Если немедленно выполняет toggleFullScreen() и передает возвращаемое значение addEventListener вместо. Код должен, вероятно, читать:

full.addEventListener('click', toggleFullScreen, false); 

Этот код передает ссылку на функцию вместо возвращаемого значения.

Рефакторинг

При использовании оператора || вы можете значительно упростить существующие условия.

var fullScreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement; 

if (fullScreenElement) { 
    var requestFullScreen = document.documentElement.requestFullscreen || document.documentElement.mozRequestFullScreen || document.documentElement.webkitRequestFullscreen 

    db.style.background ='red'; 
    ctrl.style.width = '50%'; 
    ctrl.style.left = '25%'; 
    requestFullScreen.call(elem); 
} else { 
    var exitFullScreen = document.exitFullscreen || document.mozCancelFullScreen || document.webkitCancelFullScreen; 

    db.style.background ='yellow'; 
    ctrl.style.width = '100%'; 
    ctrl.style.left = '0';   
    exitFullScreen.call(document); 
}