如果另一个元素设置为显示，如何选择元素：flex；与JS

Question

我有一个全屏固定弹出窗口，可以在显示：无；之间切换。并显示：flex；。当我的弹出窗口设置为显示时，我希望能够选择正文标签：flex; 以禁用弹出窗口后面的滚动。因此，类似于“如果 popup = display: flex; then body = Overflow: hide;”我怎样才能用一点 JS 或 Jquery 来做到这一点？或者如果有更好的方法，我愿意接受建议。这是我用来打开弹出窗口的代码：JS：<script type="text/javascript">    <!--        function toggle_visibility(id) {            event.preventDefault();           var e = document.getElementById(id);           if(e.style.display == 'flex')              e.style.display = 'none';           else              e.style.display = 'flex';        }    //-->    </script>HTML：<a href="#" onclick="toggle_visibility('id-of-popup');">Clickable item to open the Popup</a>

Answer 1

我会更改您的代码以使用类。添加包含以下内容的样式表：

.popup { display: none; }

.popup.show { display: flex; }

.popup-shown { overflow: hidden; }

然后改变你的 JavaScript 以利用这些：

function toggle_visibility(id) {

    event.preventDefault();

    var e = document.getElementById(id);

    e.classList.toggle('show');

    document.body.classList.toggle('popup-shown');

}

我假设你的弹出窗口在这里得到“popup”类。

这利用了classList现代浏览器上可用的界面，特别是不包括 Internet Explorer。

Answer 2

因此，首先，您需要使用 querySelecor 获取弹出元素。假设弹出窗口有一个 id，您将执行以下操作：

var element = document.getElementById(popup_id_here);

然后。您可以获得元素的计算样式。使用这个：

var style = getComputedStyle(element);

现在，您可以检查显示器是否为柔性的：

if(style.display == "flex") ......

将样式应用到身体上

document.body.style.overflow = "hidden";