全屏与 jquery 选择器

Question

我正在尝试使用 onclick 事件使元素全屏显示。它与点击事件函数中的以下代码配合良好：

var element = document.getElementById('fullscreenDiv');
fullScreen(element);

fullScreen 函数正确处理请求。但是当我尝试使用相同的代码，但用一个简单的 jquery 选择器替换 document.getElementById 时，什么也没有发生：

var element = $('#fullscreenDiv');
fullScreen(element);

我看不出这种行为的原因。有没有人对此作出解释？感谢您的回答！

fullScreen 函数如下所示：

function fullScreen(element) {
    if(element.requestFullScreen) {
      element.requestFullScreen();
    } else if(element.webkitRequestFullScreen ) {
      element.webkitRequestFullScreen();
    } else if(element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    }
}

Answer 1

fullScreen() 函数期望获得一个 DOMNode 元素，而不是像您通过的那样的 jQuery 对象，如果您要通过 jQuery 对象 选择的 Node 元素:

var $element = $('#fullscreenDiv');
fullScreen($element.get(0));

这也将按照您的第一个 sn-p 预期工作。为了让您更了解为什么会发生这种情况，jQuery 对象是原始 DOM 元素的集合，使用 .get() 或 [index] 访问这些收集的元素。