原始html渲染与动态JS渲染的间距不同

戴夫

这是我页面的一小部分:

<a href="#"  onclick="PolicyViolation(<%: ViewBag.DeviceData[i].DeviceID%>); return false;">
    <span class="policyViolationsNumber"><%= ViewBag.DeviceData[i].ViolationCount%></span>
    <span>Policy Violations</span>
 </a>

这表明两个跨度之间有一些空间。

在代码中,我们在JS中对此进行了更新:

var spanViolationNumber = $('<span>')
                           .html(statusModel.Violations)
                           .addClass('policyViolationsNumber');
var spanViolationString = $('<span>')
               .html('<%=ServiceSite.Resources.Resources.DEVICES_POLICY_VIOLATIONS%>');
var imageTag = $('<img>')
                 .attr('src', '/Content/images/error_error.png')
                 .attr('align', 'absmiddle');
var anchorTag = $('<a href="#">')
                   .append(spanViolationNumber)
                   .append(spanViolationString);
cell.empty();
cell.append(imageTag)
    .append(anchorTag);

但是,这显示跨度之间没有空格。我以前见过像这样的小问题,但从未弄清楚它是什么。您可以忽略图像标签的内容,这是无关紧要的。

编辑:

对此一无所知,我猜这是预期的行为:http : //jsfiddle.net/2MMuA/

光影

由于格式化HTML的方式而产生了额外的空间。

“ span”标记是一个内联HTML元素。这基本上意味着您需要像对待页面上的文本一样对待它。

<span>Hello</span> <span>World</span>
<!-- Prints Hello World -->

<span>Hello</span>
<span>World</span>
<!-- Prints Hello World
     The line break is where your extra space is coming from. -->

<span>Hello</span><span>World</span>
<!-- prints HelloWorld 
     This is how the ".append()" function is formatting the HTML.
     It adds it literally right after the last character in the HTML. -->

为了使这两种不同技术之间的关系标准化,您要么必须将“ span”标签对接在一起,以使HTML不会增加额外的空间...

<span></span><span></span>

..或您需要在“ .append()”函数中手动添加空格。

obj.append(' ' + spanTag);

希望对您有所帮助!

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

原始html渲染与动态JS渲染的间距不同

来自分类Dev

在react js中渲染动态html

来自分类Dev

从vuejs内渲染原始html

来自分类Dev

如何从渲染的HTML模板渲染JS模板?

来自分类Dev

使用Express 4渲染原始HTML视图

来自分类Dev

如何使用AngularJS渲染原始HTML?

来自分类Dev

如何修复“Vue.js 组件中的默认插槽原始 html 渲染”

来自分类Dev

在vue.js中渲染动态组件?

来自分类Dev

用jquery检索原始html,而不是渲染的html

来自分类Dev

Chrome 扩展 - 在 JavaScript 渲染之前获取真正的原始 HTML 文档

来自分类Dev

内容类型为“application/json”的渲染视图在屏幕上渲染原始 HTML

来自分类Dev

渲染JS.ERB结果为原始代码

来自分类Dev

动态渲染Mathjax

来自分类Dev

Django:动态模板渲染

来自分类Dev

动态渲染div序列

来自分类Dev

动态渲染骨干视图

来自分类Dev

Rails布局动态渲染

来自分类Dev

动态渲染Mathjax

来自分类Dev

动态流星渲染模板

来自分类Dev

reactjs动态渲染行

来自分类Dev

使用node.js渲染HTML

来自分类Dev

HTTPS 使用 Node Js 渲染 html 文件

来自分类Dev

Vue.js 关于 html 渲染的指令

来自分类Dev

通过python渲染模板时的间距问题

来自分类Dev

React.js用动态文本值渲染JSX

来自分类Dev

将 Razor 页面渲染为 html 需要不同的模型

来自分类Dev

react.js在不同位置渲染组件

来自分类Dev

Vue.js 渲染不同的表单字段

来自分类Dev

在react-native-render-html自定义渲染器中提取原始HTML