简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> JS Tutorial> body text

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

WBOY
Release： 2016-05-16 17:54:13
Original
921 people have browsed it

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

引起样式差异的原因可能就是左侧缺少换行，我就在每行字符的末尾加了换行符” ”，这样样式的问题就解决拉

复制代码代码如下:

var html =
[
"
  • \n".format(catId),
    "
    \n",
    " \n".format(catId),
    " {0}\n".format(catName),
    " [编辑][删除]\n".format(catId),
    "
    ",
    "
    \n",
    " \n".format(catName),
    " \n".format(catId),
    " \n".format(catId),
    "
    \n",
    "
    • \n"
    ].join("");

    经过长时间的思考，解决一个问题，好开心！
    作者：清流鱼
    Related labels：
    html style issue
    source：php.cn
    Previous article：javascript针对DOM的应用分析（二）_DOM Next article：javascript针对DOM的应用实例（一）_DOM
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Latest Articles by Author
    Latest Issues
    Leverage VueJS components in PHP I want to mix basic HTML generated by Php and VueJS components without having to use VueJS...
    From 2023-11-11 00:01:44
    0
    2
    288
    How to use open primitive tag in next js 13? In the recent NextJS13 update, they introduced a new way of handling meta tags that differ...
    From 2023-11-10 23:03:51
    0
    1
    527
    PHP mailer not working: no error log, message says sent but not received I don't receive any error logs in my webserver's php error log. I've tried several differe...
    From 2023-11-10 15:02:39
    0
    1
    218
    v-date-picker to select only month and year Please tell me if there is any other way to do this using v-date-picker. I just want the u...
    From 2023-11-10 14:05:05
    0
    1
    269
    The rewritten title is: SweetAlert2: "onBeforeOpen" parameters are unknown I'm using Laravel5.8 and Sweetalertv2 and I'm trying to trigger this alert on Blade with: ...
    From 2023-11-10 09:39:01
    0
    1
    257
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Related Tutorials
    Popular Recommendations
    Latest courses
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template
    About us Disclaimer Sitemap
    php.cn：Public welfare online PHP training，Help PHP learners grow quickly！