浏览器解析js生成的html出现样式问题的解决方法

我实现的功能是添加标签，无刷新地添加到标签列表的最后，见下图中第二行，样式明显有问题

我反反复复地检查了chrome console的html结构，都是一样一样的，在IE和FF下我也认真比较过的，还是没有区别。见下图

同样的html结构，同样的style，竟然展现的样式差异很大，一时没了想法，像个无头苍蝇。索性我就把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("");

经过长时间的思考，解决一个问题，好开心！
作者：清流鱼

赞 (0)

相关推荐

  • 谷歌浏览器不支持showModalDialog模态对话框的解决方法

    忽然发现Chrome浏览器版本 37.0.2062.103 m 不支持showModalDialog模态对话框和无法返回returnValue 项目原先用到的都不能正常执行 找了个折中方案利用window.open代替showModalDialog利用 window.opener.document来操作父页面的元素 复制代码 代码如下: window.open("xsp/exesp?todo=13","","height=500,width=280,sta

  • JavaScript中解决多浏览器兼容性23个问题的快速解决方法

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • Javascript iframe交互并兼容各种浏览器的解决方法

    在Web前端开发中,我们经常会用到iframe这个控件. 但是这个控在内.外交互时,往往各个浏览器所用的关键字不同,很是麻烦,为了能够得到子iframe中的window对象,各家浏览器有着各家的指定,有的是window,有的是contentWindow等等也许还有我们不知道的. 但是从子页面访问父层页面,其本上大家都是window.parent就可以了. 那么通过这个特征,我们可以在子页面中,把自身的window对象传递给父页面就可以了,这样父页面就很轻松的访问子页面,再也不用靠虑如何从ifra

  • Chrome中模态对话框showModalDialog返回值问题的解决方法

    没有找到太好的解决办法,暂时处理方法是,在弹出窗口中同时给 window.opener.ReturnValue 赋返回值.这样在关闭窗口后,通过下面的代码取得返回值: 复制代码 代码如下: var val = window.showModalDialog(...); if(!val) val= window.ReturnValue; 这样在IE.FF.及Chrome中,都可以得到返回值了.

  • JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法

    本文实例讲述了JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法.分享给大家供大家参考,具体如下: 主页面: <script type="text/javascript"> function SelectGroupCust() { var temp = window.showModalDialog("Default2.aspx?xx=" + Date(), "", "dialog

  • showModalDialog在谷歌浏览器下会返回Null的解决方法

    showModalDialog的返回值在IE.火狐下面都能够获取返回值,但是在谷歌浏览器下面会返回Null,下面介绍解决方法 父页面: 复制代码 代码如下: function openwindows(){ var obj = new Object(); //打开模态子窗体,并获取返回值 var retval = window.showModalDialog("ordervideo.jsp?rderIds="+"0010,0020,0030",obj,"di

  • javascript中IE浏览器不支持NEW DATE()带参数的解决方法

    复制代码 代码如下: var date1=new Date(dateTimes[z][1]); 在火狐下 可以正常取得时间,在IE7下 却是 NaN.纠结老长时间,放弃了new date 然后再老外的论坛中找了一段段代码可以兼容所有浏览器的格式化日期代码: 复制代码 代码如下: function NewDate(str) { str = str.split('-'); var date = new Date(); date.setUTCFullYear(str[0], str[1] - 1, s

  • 浏览器解析js生成的html出现样式问题的解决方法

    浏览器解析js生成的html出现样式问题的解决方法

    我实现的功能是添加标签,无刷新地添加到标签列表的最后,见下图中第二行,样式明显有问题 我反反复复地检查了chrome console的html结构,都是一样一样的,在IE和FF下我也认真比较过的,还是没有区别.见下图 同样的html结构,同样的style,竟然展现的样式差异很大,一时没了想法,像个无头苍蝇.索性我就把console下的html复制到notepad++进行对比,看出了一点端倪,见下图.左侧为js生成的html,右侧为页面(.aspx)中的html 引起样式差异的原因可能就是左侧缺少

  • Fabric.js 样式不更新解决方法案例

    目录 本文简介 是否需要重新绘制 代码仓库 本文简介 不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式? 如果你也遇到同样的问题的话,可以尝试使用本文的方法. 是否需要重新绘制 我先举个例子. <canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> let canvas = new fabric

  • 微信js sdk invalid signature签名错误问题的解决方法分析

    本文实例讲述了微信js sdk invalid signature签名错误问题的解决方法.分享给大家供大家参考,具体如下: /**最近在做微信js sdk 接口调用说明*/ ***相信很多人都遇见像我这样的问题,再加上自己只能算是半个程序员,所以苦苦摸索了好久终于搞懂了. ****下面就把自己所遇见的各种问题和大家分享一下,都是自己亲手实验过的********/ 一.问题说明 如果出现 invalid signature,首先可以确定的是你的签名算法有问题. 建议:首先查看微信官方网站给出的解决

  • js实现window.open不被拦截的解决方法汇总

    本文实例讲述了js实现window.open不被拦截的解决方法.分享给大家供大家参考.具体分析如下: 一.问题: 今天在处理页面ajax请求过程中,想实现请求后打开新页面,就想到通过 js window.open 来实现,但是最终都被浏览器拦截了. 二.分析: 在谷歌搜索有没有解决方法,有些说可以通过新建a标签,模拟点击来实现,但是测试发现都实现不了,照样被浏览器拦截. 最后找到了一个折中的办法,可以实现新页面打开,但是没有a标签的那种直接流量新页面的效果. 三.实现代码: 复制代码 代码如下:

  • Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法

    Vue.js 使用v-cloak后仍显示变量的解决方法 v-cloak   这个指令是防止页面加载时出现 vuejs 的变量名而设计的,但有时候添加了这个指令仍会显示变量,这是怎么回事呢?. v-cloak 用法: HTML代码: <div v-cloak> {{ message }} </div> CSS代码: [v-cloak] { display: none; } 这样直至div内变量编译完毕后才会显示. 但有时添加完毕后仍有部分变量会显示,这是怎么回事呢?通过控制台查看,原

  • DOM操作原生js 的bug,使用jQuery 可以消除的解决方法

    js的 bug 类型:  Uncaught TypeError:Cannot set/read property 'xxx' of null 在进行DOM操作的时候比较容易发生这个错误,比如: 1.  document.getElementById('test1').style.display='none' 2.  document.getElementById('test1').onclick=function(){/*相关代码*/} 假如DOM中无此 test1对象,将会抛出上面的错误,发生

  • vue.js与element-ui实现菜单树形结构的解决方法

    由于业务需要,要求实现树形菜单,且菜单数据由后台返回,在网上找了几篇文章,看下来总算有了解决办法. 场景:根据业务要求,需要实现活动的树形菜单,菜单数据由后台返回,最后的效果图如下: 后台返回的数据格式是这个样子的: data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID

  • json解析时遇到英文双引号报错的解决方法

    有时解析json时,会碰到里面带有英文的双引号,导致解析错误,可以将json进行转义,一下: public static String htmlEscape(String input) { if(isEmpty(input)){ return input; } input = input.replaceAll("&", "&"); input = input.replaceAll("<", "<")

  • js input输入百分号保存数据库失败的解决方法

    解决办法如下: 1.用ASCII码替换百分号和与符号 var remark = $("#remark").val(); remark.replaceAll("ASCII69","%").replaceAll("ASCII70","&"); //展示时需要对原先替换的进行还原展示 remark.replaceAll("%","ASCII69").replaceA

  • Ubuntu 20.04 火狐浏览器无法播放视频（缺少flash插件）的解决方法

    1.flash插件包下载地址:https://get.adobe.com/cn/flashplayer/ 本地下载: adobe Flash Player 浏览器flash播放插件 v32.0.0.207 Adobe Flash Player for Firefox 28.0.0.126 中文官方最新版 2.解压下载的文件:tar xzvf flash_player_npapi_linux.x86_64.tar.gz 3.打开终端并将路径切换到lib目录:cd /usr/lib 4.在lib目录

随机推荐