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


Posted in Javascript onApril 16, 2012

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

经过长时间的思考,解决一个问题,好开心!
作者:清流鱼
Javascript 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
mailto的使用技巧分享
Dec 21 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
深入理解Node module模块
Mar 26 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 05 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
基于jquery的不规则矩形的排列实现代码
Apr 16 #Javascript
JavaScript打开word文档的实现代码(c#)
Apr 16 #Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 #Javascript
Moment.js 不容错过的超棒Javascript日期处理类库
Apr 15 #Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 #Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 #Javascript
javascript针对DOM的应用分析(四)
Apr 15 #Javascript
You might like
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
2013/07/03 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
php三元运算符知识汇总
2015/07/02 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
javascript优先加载笔记代码
2008/09/30 Javascript
jquery使用经验小结
2015/05/20 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
Vue中多个元素、组件的过渡及列表过渡的方法示例
2019/02/13 Javascript
Vue程序调试的方法
2019/06/17 Javascript
layui表格数据重载
2019/07/27 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
python实现逻辑回归的方法示例
2017/05/02 Python
Windows下python3.7安装教程
2018/07/31 Python
Python实现Linux监控的方法
2019/05/16 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Python numpy多维数组实现原理详解
2020/03/10 Python
Django ORM实现按天获取数据去重求和例子
2020/05/18 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
利用python绘制正态分布曲线
2021/01/04 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
十岁生日父母答谢词
2014/01/18 职场文书
大学毕业感言50字
2014/02/07 职场文书
啦啦队口号大全
2014/06/16 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
浅谈如何提高PHP代码质量之端到端集成测试
2021/05/28 PHP
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript