瀏覽器解析js生成的html出現(xiàn)樣式問題的解決方法
更新時間：2012年04月16日 14:57:18 作者：
接觸css, javascript有三年多了，今天遇到的問題最令我不可思議，很容易給人一種錯覺，那就是js拼成的html結構肯定有問題
我實現(xiàn)的功能是添加標簽，無刷新地添加到標簽列表的最后，見下圖中第二行，樣式明顯有問題
我反反復復地檢查了chrome console的html結構，都是一樣一樣的，在IE和FF下我也認真比較過的，還是沒有區(qū)別。見下圖
同樣的html結構，同樣的style，竟然展現(xiàn)的樣式差異很大，一時沒了想法，像個無頭蒼蠅。索性我就把console下的html復制到notepad++進行對比，看出了一點端倪，見下圖。左側為js生成的html，右側為頁面（.aspx）中的html
引起樣式差異的原因可能就是左側缺少換行，我就在每行字符的末尾加了換行符”\n”，這樣樣式的問題就解決拉
var html =
[
"<li id=\"litem_{0}\">\n".format(catId),
"<div>\n",
"<span class=\"checkbox\"><input type=\"checkbox\" name=\"cbItem\" value=\"{0}\" /></span>\n".format(catId),
"<span class=\"name\">{0}</span>\n".format(catName),
"<span><a href=\"javascript:void(0);\" onclick=\"Blog.Cat.edit({0});\">[編輯]</a><a href=\"javascript:void(0);\" onclick=\"Blog.Cat.delCat({0});\">[刪除]</a></span>\n".format(catId),
"</div>",
"<div style=\"display:none;\">\n",
"<span><input type=\"text\" value=\"{0}\"/></span>\n".format(catName),
"<span><button type=\"button\" class=\"button\" onclick=\"Blog.Cat.setCat({0});\">確定</button></span>\n".format(catId),
"<span><button type=\"button\" class=\"button\" onclick=\"Blog.Cat.cancel({0});\">取消</button></span>\n".format(catId),
"</div>\n",
"</li>\n"
].join("");
經(jīng)過長時間的思考，解決一個問題，好開心！
作者：清流魚
我反反復復地檢查了chrome console的html結構，都是一樣一樣的，在IE和FF下我也認真比較過的，還是沒有區(qū)別。見下圖
同樣的html結構，同樣的style，竟然展現(xiàn)的樣式差異很大，一時沒了想法，像個無頭蒼蠅。索性我就把console下的html復制到notepad++進行對比，看出了一點端倪，見下圖。左側為js生成的html，右側為頁面（.aspx）中的html
引起樣式差異的原因可能就是左側缺少換行，我就在每行字符的末尾加了換行符”\n”，這樣樣式的問題就解決拉
復制代碼 代碼如下:
var html =
[
"<li id=\"litem_{0}\">\n".format(catId),
"<div>\n",
"<span class=\"checkbox\"><input type=\"checkbox\" name=\"cbItem\" value=\"{0}\" /></span>\n".format(catId),
"<span class=\"name\">{0}</span>\n".format(catName),
"<span><a href=\"javascript:void(0);\" onclick=\"Blog.Cat.edit({0});\">[編輯]</a><a href=\"javascript:void(0);\" onclick=\"Blog.Cat.delCat({0});\">[刪除]</a></span>\n".format(catId),
"</div>",
"<div style=\"display:none;\">\n",
"<span><input type=\"text\" value=\"{0}\"/></span>\n".format(catName),
"<span><button type=\"button\" class=\"button\" onclick=\"Blog.Cat.setCat({0});\">確定</button></span>\n".format(catId),
"<span><button type=\"button\" class=\"button\" onclick=\"Blog.Cat.cancel({0});\">取消</button></span>\n".format(catId),
"</div>\n",
"</li>\n"
].join("");
經(jīng)過長時間的思考，解決一個問題，好開心！
作者：清流魚
相關文章
這篇文章主要介紹了如何構建一個JavaScript插件系統(tǒng)，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-10-10
javascript結合fileReader 實現(xiàn)上傳圖片
FileReader具體支持哪些方法和事件，這里就不介紹了，有興趣的可以去w3c官網(wǎng)上看看FileReader介紹，這里主要介紹一下FileReader常見應用，以及fileReader 實現(xiàn)上傳圖片示例分享。2015-01-01
本文給大家介紹了js控制臺的使用，非常不錯，具有一定的參考借鑒借鑒價值，需要的朋友參考下吧2018-07-07
實例解析js中try、catch、finally的執(zhí)行規(guī)則
本文主要通過實例解析來更好的了解js中try、catch、finally的執(zhí)行規(guī)則，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
ionic App問題總結系列之ionic點擊系統(tǒng)返回鍵退出App
本篇文章主要介紹了ionic App問題總結系列之ionic點擊系統(tǒng)返回鍵退出App，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了詳解js創(chuàng)建對象的幾種方式和對象方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
這篇文章主要為大家介紹了移動端touch拖動和click事件沖突問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
使用javascript制作的2048小游戲非常好玩，有意思，下面給大家分享使用javascript代碼制作的2048游戲，需要的朋友參考下吧2016-03-03
js 實現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼
這篇文章主要介紹了js 實現(xiàn)watch監(jiān)聽數(shù)據(jù)變化的代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
網(wǎng)站基于flash實現(xiàn)的Banner圖切換效果代碼
這篇文章主要介紹了網(wǎng)站基于flash實現(xiàn)的Banner圖切換效果代碼,是基于Flash與js實現(xiàn)的banner圖片自動定時切換特效,并附有完整的示例源碼,非常具有實用價值,需要的朋友可以參考下2014-10-10