ASP.Net 4.0 URL 路由阻止 javascript 运行答案

【问题标题】：ASP.Net 4.0 URL Routing block javascript from runningASP.Net 4.0 URL 路由阻止 javascript 运行
【发布时间】：2012-05-10 09:53:05
【问题描述】：

我有文章详细信息页面，我在其中显示文章图片、日期和文章文本等文章详细信息。在文章的左侧我放了一条垂直的蓝线，它等于文章正文的高度，因为我不确定文章高度我使用 javascript 来获取文章文本容器的高度并分配相同的高度到宽度为 3 像素的垂直蓝色条 (div id='ArticleBlueSide')。

它工作正常，蓝线也出现在没有 URL 路由的情况下，但是当我添加 URL 路由时，蓝线没有出现。

下面是脚本块和我的 HTML div 包含。

我正在使用 c# 处理 ASP.Net 4.0 Web 表单。

如果有人能帮助我解决这个设计问题，我将不胜感激。

$(document).ready(function () {
    var h = document.getElementById("ArticleTextArea").offsetHeight;
    h = h - 25;
    document.getElementById("ArticleBlueSide").style.height = h + "px";
});


<div id="ArticleContainer">
     <div id="ArticleBlueSide"></div>
     <div id="ArticleTextArea">
          <asp:Label ID="lblArticleDetails" CssClass="PageBodyText" runat="server"  meta:resourcekey="lblArticleDetailsResource1"></asp:Label>
     </div>
</div>

页面插图示例

在实施 riffnl 建议的解决方案后（这有其自身的问题，因为蓝线比文本长，我无法修复它，因为段落周围有填充。我的第一个解决方案运行良好，但在 URL 路由后它不工作

【问题讨论】：

我尝试重新初始化脚本，即使没有成功
只是出于好奇；为什么不让蓝色条作为 div 的背景和从左侧填充的文本？这样背景总是会自动拉伸。
这是个好主意。太棒了..我会尝试那个选项
@riffnl 我实施了您的解决方案，但它产生了另一个设计问题，如图所示添加到问题中。
这和路由有什么关系？您是否使用了 CSS 文件的相对路径，而该相对路径现在是错误的？

标签： jquery asp.net css webforms

【解决方案1】：

@riffnl 的解决方案是可行的方法 - 解决您的填充问题，如下所示： http://jsfiddle.net/Wf6tA/

请注意，您可以单击段落来标记或取消标记。

【讨论】：

这是一个有用的脚本，但我希望有一条没有中断的垂直线，如第一张图片所示..
这就是示例所做的 - 每段的完整标记线，如您的帖子中所示。如果您的意思是跨段落，这是一个简单的更改。 jsfiddle.net/Wf6tA/1
解决方案很好，但问题是我的段落标签的顶部填充为 10px，这增加了额外的蓝线，如第二张图片所示。我通过在 div 标签之后添加我的原始脚本解决了同样的问题，它可以工作我不知道如果我将脚本保留在包含文章主体的 div 标签之前它为什么不起作用

【解决方案2】：

我移动了以下脚本并将其放在解决了我的问题的 div 标记之后。如果我在 div 标签之前保留此脚本，我不明白为什么它不起作用。

$(document).ready(function () {
    var h = document.getElementById("ArticleTextArea").offsetHeight;
    h = h - 25;
    document.getElementById("ArticleBlueSide").style.height = h + "px";
});

感谢其他人的回复，但这是我希望脚本的行为。

【讨论】：