1

記事の画像、日付、記事のテキストなどの記事の詳細を表示する記事の詳細ページがあります。記事の左側に、記事の本文の高さに等しい縦の青い線を入れます。記事の高さがよくわからないため、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 ルーティング後に機能しないことを除いて、最初のソリューションは正常に機能しました

解決後の例

4

2 に答える 2

0

@riffnlの解決策は進むべき道です-次のようにパディングの問題を解決してください：http： //jsfiddle.net/Wf6tA/

段落をクリックして、マークを付けたり、マークを外したりできることに注意してください。

于 2012-05-10T10:54:25.943 に答える
0

次のスクリプトを移動し、div タグの後に配置して問題を解決しました。div タグの前にこのスクリプトを保持すると、なぜ機能しないのかわかりません。

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

他の人からの返信に感謝しますが、これがスクリプトの動作を望んでいたことです。

于 2012-05-12T15:27:16.073 に答える