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