删除子语法 - 我需要一双经验丰富的眼睛
removeChild Syntax - I Need A Pair of Experienced Eyes
我是第一次使用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 本身中创建框,将其设置为没有显示的类,然后更改它的类。不仅更容易,而且会阻止您创建和破坏。这样资源密集度更低。
相关文章:
- 使用类从一个标记中双击事件
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- Javascript返回值只在循环中返回一次
- 有没有一种方法可以添加相同的项目val=“0”;4〃;到JavaScript中数组的每个对象
- 有没有一种方法可以防止img get请求使用css或js发生
- Javascript,有没有一种方法可以将数组写成没有逗号或空格的单个文本字符串
- Jquery FadeIn FadeOut 只工作一次
- 如何获取不属于我项目的上一页的URL
- 为第一次尝试Javascript的经验丰富的开发人员提供建议
- 删除子语法 - 我需要一双经验丰富的眼睛
- 有没有一种简单的方法可以在节点上双击 vis.js 创建超链接/javascript-action
- 双击时设置内容可编辑 - IE 不允许编辑,除非再单击一次
- 双击时仅提交一次
- 第一个JS,向经验丰富的JS程序员寻求建议
- 如何防止鼠标双击(一次)
- 只替换一次双引号的最好方法是什么?
- 双击从(文档)而不是一次关闭选择下拉菜单
- 双击一列时,如何编辑它
- 客户端'单击“上一步”时,s CC双倍收费
- 是否有机会得到一个按钮与双击禁用后,一键点击