javascript - 在页面的特定部分添加块

Question

我有一个网站。假设有 5 个高度为 1000 像素的块，当我在块 4 上时如何使用 JS 执行功能（在指定的情况下 div class = 'one'，将 c dispay = 'none' 更改为 'flex'）

<header></header>
<main>
    <div class="1"></div>
    <div class="2"></div>
    <div class="3 "></div>
    <div class="4 one"></div>
    <div class="5"></div>
</main>

标签： javascript

Answer 1

class="4 one"在您的示例中，您可以使用以下 js 代码获取元素：

var fouthElement = document.getElementsByClassName("one")[0]

如果您尝试将display样式更改为flex，请尝试以下操作：

var fouthElement = document.getElementsByClassName("one")[0]
fourthElement.style.display = "flex"

编辑：

感谢您澄清问题。在这种情况下，使用本文中提到的方法，当第四个元素在当前视图中时，这可能会运行函数。

var isInViewport = function(elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

var fouthElement = document.getElementsByClassName("one")[0]

window.addEventListener('scroll', function() {
    if (isInViewport(fouthElement)) {
      alert("Element in view")
    }
})