いくつかのdiv要素（複数可）のcreateElementとのappendChild

Question

を使用しているとき、私は5pxの幅を持っており、上部に座ることになっている4つのdiv要素（複数可）を作成しようとしています表示されない、下、ビューポートの左右のマージン、基本的にすべてをまとめてページのフレームまたは枠として機能させます。関数を呼び出し、左右のdiv（すなわちedgeLとedgeRとが）正常に表示されるいくつかの理由から、

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

} 

が、edgeTとEDGEB（の痕跡はありません。ここで

は私のコードです上部と下部のもの）。コードが4つのすべてのコードとまったく同じである理由は分かりません。この問題はChromeとFirefoxの両方で関連しています

は、私は同じ結果を達成するためにCSSを使用することができます知っているが、これは主に学習運動ですので、私はまだこのケースで問題を引き起こしているかを理解したいと思います。

ご協力いただきありがとうございます。

よろしく、

Answer 1

あなたは、上部と下部のdiv width: 100%ためとheight: 5px（それらが水平に整列している）と、左右のdiv width: 5pxとheight: 100%（垂直整列）のために定義する必要があります。

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

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

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

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

Answer 2

あなたは上部と下部を見たいなら、あなたは彼らに高さ、ない幅を与える必要があります。