如何获得1 td的实际高度？答案

【问题标题】：How to get actual height of 1 td?如何获得1 td的实际高度？
【发布时间】：2012-04-17 04:47:34
【问题描述】：

我有一张这样的桌子：

<table>
<tr>
<td id='tdleftcontent' style='border:1px solid red;'>
    <asp:Label ID='lbl' runat="server"></asp:Label>
</td>
</tr>
</table>

使用控件 lbl，在后面的代码中，我将文本设置为 'img src='/CMS/Images/News/event1.JPG' border='0' />'

    protected void Page_Load(object sender, EventArgs e)
    {
        this.lbl.Text = "<img alt='' src='/CMS/Images/News/event1.JPG' border='0' />";
    }

在 Javascript 中，我有一个函数来获取这个 td 的高度：

<script type="text/javascript">
$(document).ready(function(){
    var h = document.getElementById('tdleftcontent').offsetHeight;
    alert(h);
});

但结果是：h=22px。这意味着该图像尚未显示在网络上。结果图片：http://upanh.nguoihoian.info/di-534E.jpg

请帮我解决这个问题。非常感谢。

【问题讨论】：

标签： javascript asp.net

【解决方案1】：

尝试使用<asp:placeholder> 而不是<asp:label>，并在浏览器中查看源代码以确保正确创建了 IMG 标记并且 SRC 属性确实存在。

【讨论】：

谢谢。但我想要的是通过标签（或）将 WYSWYG 中的内容显示到网络上。

【解决方案2】：

请注意，一旦 DOM 准备就绪，$(document).ready() 就会执行您的代码。如果你想在图片加载后执行你的代码，那么你应该$(window).load(function () {})

【讨论】：

谢谢。我想要的是通过标签（或）将 WYSWYG 中的内容显示到 web，然后获取 td 的高度。你的建议肯定对我有很大帮助。 td 的高度正好是现在。
如果您的答案正确，请不要忘记接受它。 :-)

【解决方案3】：

我建议像这样使用Image 控件：

<asp:image runat="server" ImageUrl="~/CMS/Images/News/event1.JPG" BorderWidth="0" />

对于 JavaScript，只需使用 jQuery height 函数获取高度。

<script type="text/javascript">
$(window).load(function(){
    var h = $('#tdleftcontent').height();
    alert(h);
});
<script>

jQuery 中还有 innerHeight 和 outerHeight 函数以满足更具体的需求。

已编辑：其他人提出了一个很好的观点，即在加载图像之前高度值将不可用。如果您不想等到页面上的所有内容都加载完毕，那么您可以创建图像客户端并附加到它的加载事件。只是要注意在图像添加到 DOM 之后设置 src 属性。

.NET 代码

this.lbl.Attributes["data-src"] = "/CMS/Images/News/event1.JPG";

JavaScript

<script type="text/javascript">
$(document).ready(function(){
    var $td = $('#tdleftcontent');
    $('<img border="0" />')
        .bind('load', function() {
            $td.height();
            alert(h);
        })
        .bind('error', function() {
            $(this).hide();
        })
        .appendTo($td)
        .attr('src', $td.find('span').data('src'));
});
<script>

【讨论】：

谢谢。使用 window.load 函数可以帮助我解决这个问题。我非常喜欢它。

【解决方案4】：

不要在这里使用$(document).ready。它将在DOM就绪时执行处理程序，即图像通常不会被加载。请改用$(window).load，或者更好地在图像本身上注册加载处理程序。

【讨论】：