js全屏函数（在特定情况下比requestFullScreen好使）

本文链接：https://blog.csdn.net/zhazhashuai1999/article/details/134447080

文章介绍了如何使用JavaScript的fullscreen事件处理函数，实现元素在全屏和非全屏状态之间的切换，同时管理元素样式和祖先元素的overflow属性。

摘要由CSDN通过智能技术生成

 fullscreen(event) {
            var element = event.target;

            if (element.isFullscreen) {
              // 如果元素已经处于全屏模式，那么恢复元素的原始样式
              Object.assign(element.style, element.originalStyle);

              // 恢复祖先元素的overflow属性
              element.ancestorOverflowStyles.forEach((style, ancestor) => {
                ancestor.style.overflow = style;
              });

              element.isFullscreen = false;
            } else {
              // 获取元素的定位父元素
              var parent = element.offsetParent;

              // 如果没有定位父元素，则使用body元素
              if (!parent) {
                parent = document.body;
              }

              // 如果元素不处于全屏模式，那么将元素设置为全屏，并保存元素的原始样式
              element.originalStyle = {
                position: element.style.position,
                top: element.style.top,
                left: element.style.left,
                width: element.style.width,
                height: element.style.height,
              };

              // 获取元素的CSS属性
              var style = window.getComputedStyle(element);

              // 获取定位父元素的位置
              var parentRect = parent.getBoundingClientRect();

              // 设置元素的定位属性为绝对
              element.style.position = "absolute";

              // 设置元素的位置和尺寸以覆盖其定位父元素
              element.style.top = -parentRect.top + parseInt(style.top) + "px";
              element.style.left =
                -parentRect.left + parseInt(style.left) + "px";
              element.style.width = window.innerWidth + "px";
              element.style.height = window.innerHeight + "px";
              element.style.zIndex = 9999999;
              // 设置所有祖先元素的overflow属性为visible，并保存原始overflow属性
              element.ancestorOverflowStyles = new Map();
              var ancestor = element.parentNode;
              while (ancestor && ancestor !== document.body) {
                element.ancestorOverflowStyles.set(
                  ancestor,
                  ancestor.style.overflow
                );
                ancestor.style.overflow = "visible";
                ancestor = ancestor.parentNode;
              }

              element.isFullscreen = true;
            }
          }