檢查專案是否在DOM中并執行javascript函式的問題

我正在制作一個具有兩個不同導航欄的網頁......假設我將它們命名為 navbar1 和 navbar2 ..所以 navbar1 正在網站的主頁上使用，navbar2 正在所有其他子頁面上使用......我有撰寫了一個純 Javascript 函式，用于檢查 DOM 中是否存在 navbar1，如果存在，則執行某些操作……如果 DOM 中不存在 navbar1，則應忽略該部分代碼并繼續執行其余部分……

所以現在我遇到了這個問題，我花了幾個小時試圖解決這個問題......我可以弄清楚......當我進入主頁時，代碼作業......應該發生在navbar1上的一切都發生了...... . 但如果我轉到不使用 navbar1 的子頁面，我會在控制臺中收到此錯誤：“無法讀取 null 的屬性（讀取 'getBoundingClientRect'） ”

我會感謝一些幫助......如果重要的話，我對javascript沒有太多經驗，所以:)

所以這是我的JS代碼...

function docReady(fn) {
    if (document.readyState === "complete" || document.readyState === "interactive") {
        setTimeout(fn, 1);
    } else {
        document.addEventListener("DOMContentLoaded", fn);
    }
}

docReady(function() {
    var className = "scroll";
    var scrollTrigger = 60;
    var navTogler = document.getElementById('navbar-toggler');
    var navbar1 = document.getElementById('navbar1');

    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)
        );
    };

    if (isInViewport(navbar1)) {
        navTogler.addEventListener('click', classToggle);

        function classToggle() {
            navbar1.classList.toggle('has-bg');
            if (navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            if (navbar1.classList.contains('scroll') && navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            if (!navbar1.classList.contains('scroll') && !navbar1.classList.contains('has-bg')) {
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
            }
            else {
                // console.log("something");
            }
        }

        window.onscroll = function() {
            if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
                document.getElementById("navbar1").classList.add(className);
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_blue.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search-blue.svg";
            }
            else {
                document.getElementById("navbar1").classList.remove(className);
                document.getElementsByClassName("logo")[0].src="./assets/images/Logo_White.svg";
                document.getElementsByClassName("search")[0].src="./assets/images/search.svg";
            }
        };
    }

    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 3,
        grid: {
            rows: 2,
        },
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });

    console.log("hello swiper");

});

uj5u.com熱心網友回復：

isInViewport()false如果元素不存在，則應該回傳。

    var isInViewport = function (elem) {
        if (!elem) {
            return false;
        }
        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)
        );
    };

標籤：javascript html dom

上一篇：如何通過覆寫現有影像將一堆影像轉換為黑白影像？

下一篇：Javascript對DOM影像檔案的.src分配是異步的嗎？