Question

我正在尝试创建4个宽度为5px的div，它们位于视口的顶部，底部，左侧和右侧边缘，基本上作为框架或边框一起作用于页面

这是我的代码：

function border () {

edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.left = 0;
edgeT.style.top = 0;
edgeT.style.right = 0;
edgeT.style.width = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);

edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.left = 0;
edgeB.style.right = 0;
edgeB.style.bottom = 0;
edgeB.style.width = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);

edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.bottom = 0;
edgeL.style.width = "5px";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);

edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.top = 0;
edgeR.style.bottom = 0;
edgeR.style.right = 0;
edgeR.style.width = "5px";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);

}

由于某种原因，在调用函数时，左右div（即edgeL和edgeR）正确显示，但没有edgeT和edgeB（顶部和底部）的痕迹。我无法理解为什么因为这四个代码的代码完全相同。仅供参考，这个问题在Chrome和Firefox中都很重要。

我知道我可以使用CSS来达到相同的效果，但由于这主要是一个学习练习，我仍然希望了解在这种情况下导致问题的原因。

提前感谢大家的帮助。

此致

Answer 1

您应该定义顶部和底部div width: 100%和height: 5px（它们水平对齐）以及左右div [{1}}和width: 5px （垂直对齐）。

height: 100%

Answer 2

如果你想看到顶部和底部，那么你需要给它们一个高度，而不是宽度。

使用createElement和appendChild时，某些div不显示

2 个答案: