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

Question

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

它工作正常，没有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路由后无法正常工作

Answer 1

@riffnl的解决方案是解决之道-像这样解决填充问题： http : //jsfiddle.net/Wf6tA/

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

Answer 2

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

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

我感谢其他人的答复，但这是我想要脚本表现的内容。