浏览器解析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 相关文章推荐
关于jQuery中的end()使用方法
Jul 10 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
jQuery的end()方法使用详解
Jul 15 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
基于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
德劲1103二次变频版的打磨
2021/03/02 无线电
PHP Mysql编程之高级技巧
2008/08/27 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
JavaScript中实现最高效的数组乱序方法
2014/10/11 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JS瀑布流实现方法实例分析
2016/12/19 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
2018/11/23 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
浅析Python中signal包的使用
2015/11/13 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python 多核并行计算的示例代码
2017/11/07 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
对python函数签名的方法详解
2019/01/22 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
面向对象概念面试题(.NET)
2016/11/04 面试题
幼儿园家长评语
2014/02/10 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
知名企业招聘广告词大全
2014/03/18 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
Python+Selenium实现抖音、快手、B站、小红书、微视、百度好看视频、西瓜视频、微信视频号、搜狐视频、一点号、大风号、趣头条等短视频自动发布
2022/04/13 Python