差異UI使用JS和HTML

我已經創建使用HTML和JS代碼seperately一個UI設計給出。但我觀察到輸出有點不同， - 由HTML代碼輸出的按鈕之間有空格 - 由JS代碼輸出沒有。

我去開發工具來檢查最終的代碼，兩者都是一樣的。爲什麼觀察到這種差異？

附加代碼： HTML：

<div id="res" class="result"></div> 
<div id="btns" class="container"> 
    <button id="btn0" class="button number">0</button> 
    <button id="btn1" class="button number">1</button> 
    <button id="btnClr" class="button final">C</button> 
    <button id="btnEql" class="button final">=</button> 
    <button id="btnSum" class="button operation">+</button> 
    <button id="btnSub" class="button operation">-</button> 
    <button id="btnMul" class="button operation">*</button> 
    <button id="btnDiv" class="button operation">/</button> 
</div>

JS：

var result = document.createElement("div"); 
result.setAttribute('id', 'res'); 
result.setAttribute('class', 'result'); 
document.body.appendChild(result); 

var btns = document.createElement("div"); 
btns.setAttribute('id', 'btns'); 
btns.setAttribute('class', 'container'); 

var btn1 = document.createElement("button"); 
btn1.setAttribute('id', 'btn1'); 
btn1.setAttribute('class', 'button number'); 
btn1.innerHTML = '1'; 

var btn0 = document.createElement("button"); 
btn0.setAttribute('id', 'btn0'); 
btn0.setAttribute('class', 'button number'); 
btn0.innerHTML = '0'; 

var btnClr = document.createElement("button"); 
btnClr.setAttribute('id', 'btnClr'); 
btnClr.setAttribute('class', 'button final'); 
btnClr.innerHTML = 'C'; 

var btnEql = document.createElement("button"); 
btnEql.setAttribute('id', 'btnEql'); 
btnEql.setAttribute('class', 'button final'); 
btnEql.innerHTML = '='; 

var btnSum = document.createElement("button"); 
btnSum.setAttribute('id', 'btnSum'); 
btnSum.setAttribute('class', 'button operation'); 
btnSum.innerHTML = '+'; 

var btnSub = document.createElement("button"); 
btnSub.setAttribute('id', 'btnSub'); 
btnSub.setAttribute('class', 'button operation'); 
btnSub.innerHTML = '-'; 

var btnMul = document.createElement("button"); 
btnMul.setAttribute('id', 'btnMul'); 
btnMul.setAttribute('class', 'button operation'); 
btnMul.innerHTML = '*'; 

var btnDiv = document.createElement("button"); 
btnDiv.setAttribute('id', 'btnDiv'); 
btnDiv.setAttribute('class', 'button operation'); 
btnDiv.innerHTML = '/'; 

btns.appendChild(btn0); 
btns.appendChild(btn1); 
btns.appendChild(btnClr); 
btns.appendChild(btnEql); 
btns.appendChild(btnSum); 
btns.appendChild(btnSub); 
btns.appendChild(btnMul); 
btns.appendChild(btnDiv); 

document.body.appendChild(btns);

CSS：

.container { 
    width: 90% 
} 

.result { 
    width: 81%; 
    height: 48px; 
    font-size: 20px; 
    border: solid; 
    background-color: lightgray; 
} 

.button { 
    width: 22%; 
    height: 36px; 
    font-size: 18px; 
} 

.number { 
    background-color: lightgreen; 
    color: brown; 
} 

.final { 
    background-color: darkgreen; 
    color: white; 
} 

.operation { 
    background-color: black; 
    color: red; 
}

來源

2016-03-10 KrrishL

空格是HTML中的字符，用於新行/縮進的空間稱爲「文本節點」，並具有小型可視化表示形式，您可以將它看作按鈕之間的空格。在使用'appendChild'的Javascript中，元素之間沒有額外的空格，因爲HTML中有這些空格，因此按鈕之間不會有空格。如果您要重新格式化HTML，以便所有按鈕都位於一行中，並且開始標籤和結束標籤之間沒有空格，您將獲得相同的效果。 – skyline3000

這是因爲在加載爲HTML它增加了一些額外的字符textNodes。這是因爲你在html中給出的縮進。

但同時通過JS插入節點不會出現這種情況。被JS你就不會添加任何textNodes因此沒有間距看出其間的

<div id="res" class="result"></div> 
<div id="btns" class="container"> 
    <button id="btn0" class="button number">0</button> 
    <button id="btn1" class="button number">1</button>

嘗試使用minifier或刪除indendation縮小的給予如下圖所示

<div id="res" class="result"></div><div id="btns" class="container"><button id="btn0" class="button number">0</button><button id="btn1" class="button number">1</button>

來源

2016-03-10 16:35:34

HTML確實是人類可讀的，但不是人性化的 – nekavally

有一天，文本空間崩潰：丟棄;可能工作......但同時你可以添加一個負間距到你的css容器的按鈕。

.container { 
    letter-spacing: -0.25em; 
    width: 90%; 
}

但要小心。如果您的容器包含有意義的空間，這將不合適。你也可以添加：

letter-spacing: normal;

你的孩子容器像.button所以那裏的文字不會混淆。

注意：我測試了你的jsfiddle，它似乎工作。

來源

2016-03-10 18:46:37

差異UI使用JS和HTML

回答

相關問題