動態添加控件無 CSS 是前端開發中常見的一種情況。在后臺處理完數據后,通過 JavaScript 動態添加控件到頁面上,但是這些控件沒有任何樣式。
示例代碼如下:
var newElement = document.createElement("input"); newElement.type = "text"; newElement.className = "my-input"; // 這里添加的樣式是 my-input,需要在 CSS 文件中添加相應的控制樣式 document.body.appendChild(newElement);
在以上代碼中,我們創建了一個新的 input 元素,并設置其類型為文本框,然后為其添加了一個名為 my-input 的樣式。但此時我們并沒有在 CSS 文件中定義這個樣式,因此這個文本框控件沒有任何樣式效果。
為了解決這個問題,我們需要在 CSS 文件中定義相應的樣式,例如:
.my-input { width: 200px; height: 30px; border: 1px solid #ccc; padding: 5px; }
在以上 CSS 樣式中,我們定義了 my-input 樣式為文本框控件的寬度為 200px,高度為 30px,邊框為 1px 實線邊框,內邊距為 5px。現在在將控件添加至頁面后,其樣式就會按照以上定義的樣式顯示出來。
上一篇利用css設置網頁的樣式
下一篇園維破css