removeChild語法-我需要一雙經驗豐富的眼睛

Question

我是第一次使用removeChild方法。 我使用javascript修改了導航欄，使其更改為固定位置並與用戶一起滾動。 發生這種情況時，這會使body div的內容略有上升。 結果，當導航欄的位置更改時，我設法插入了一個紅色框（以后將為白色）以占用額外的空間。

當用戶滾動到頂部時，我需要刪除該紅色框，但似乎無法啟動remove child函數。 如果有人可以看一下並指出正確的方向，那將會很不錯！

代碼（相關代碼部分以粗體顯示）：

var fillerState = false;
// fixed positioning on scroll property for taskbar:
    window.addEventListener('scroll', function (evt) {
      var distance_from_top = document.body.scrollTop;
      if (distance_from_top <= 80) {
        document.getElementById("navBar").style.position = "static";
        document.getElementById("navBarList").style.borderBottom = "solid black 4px";
        document.getElementById("navBar").style.borderTop = "initial";
        var myCollection = document.getElementsByClassName("navBarLink");
        var collectionLength = myCollection.length;
        for(var i = 0; i < collectionLength; i++){
            myCollection[i].style.borderTopLeftRadius = "1em";
            myCollection[i].style.borderTopRightRadius = "1em";
            myCollection[i].style.borderBottomLeftRadius = "initial";
            myCollection[i].style.borderBottomRightRadius = "initial"; 
            }
// stops loads of boxes from forming:
        **if(fillerState == true){
            var parentRemove = document.getElementById("bodyDiv");
            var fillerBoxRemove = document.getElementById("fillerBox");
            parentRemove.removeChild(fillerBoxRemove);
            fillerState = false;
            alert(fillerState);**
        }

      }


        else if(distance_from_top > 80) {
            document.getElementById("navBar").style.position = "fixed";
            document.getElementById("navBar").style.top = "0px";
            document.getElementById("navBar").style.borderTop = "solid black 4px";
            document.getElementById("navBarList").style.borderBottom = "initial";
            var myCollection = document.getElementsByClassName("navBarLink");
            var collectionLength = myCollection.length;
            if(fillerState == false){

        // sets filler element so that the page doesn't bounce:
                var filler = document.createElement("div");
                filler.style.width = "200px";
                filler.style.height = "80px";
                filler.style.backgroundColor = "red";
                filler.style.id = "fillerBox";

        //defines where the new element will be placed:
                var parent = document.getElementById("bodyDiv");
                var brother = document.getElementById("leftColumn");
                parent.insertBefore(filler,brother);
                fillerState = true;

            }



            for(var i = 0; i < collectionLength; i++){
                myCollection[i].style.borderTopLeftRadius = "initial";
                myCollection[i].style.borderTopRightRadius = "initial";
                myCollection[i].style.borderBottomLeftRadius = "1em";
                myCollection[i].style.borderBottomRightRadius = "1em"; 
                }
        } 

    });

Answer 1

正如斜眼指出的那樣，在制作元素時，您將其設置為style.id，這是不對的。

更改：

filler.style.id = "fillerBox";

至：

filler.id = "fillerBox";

並且您的代碼將起作用。

或者，您可以按照其他人的建議進行操作，並在html本身中創建框，將其設置為沒有顯示的類，然后更改其類。 不僅容易，而且阻止您創建和銷毀。 這樣可以減少資源密集型。