删除子语法 - 我需要一双经验丰富的眼睛

removeChild Syntax - I Need A Pair of Experienced Eyes

本文关键字:一双 经验丰富 眼睛 语法 删除      更新时间:2023-09-26

我是第一次使用removeChild方法。我使用 javascript 修改我的导航栏,使其更改为固定位置并与用户一起滚动。发生这种情况时,这会导致正文div 的内容略微向上跳跃。结果,我设法插入了一个红色框(稍后将是白色的),以便在导航栏的位置发生变化时占用额外的空间。

当用户滚动回顶部时,我需要删除该红色框,但我似乎无法触发删除子函数。如果有人能看一眼,为我指出正确的方向,那将是膨胀的!

代码

(相关代码部分以粗体显示):

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

正如 Squint 指出的那样,当你制作元素时,你正在设置它 style.id,这是不对的。

改变:

filler.style.id = "fillerBox";

自:

filler.id = "fillerBox";

你的代码将起作用。

或者,您可以按照其他人的建议进行操作,并在 html 本身中创建框,将其设置为没有显示的类,然后更改它的类。不仅更容易,而且会阻止您创建和破坏。这样资源密集度更低。