如何获得 1 td 的实际高度

How to get actual height of 1 td?

本文关键字：高度 td 何获得      更新时间：2023-09-26

>我有这样的表格：

<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' 边框='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

请帮助我解决这个问题。谢谢。

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

请注意

，一旦 DOM 准备就绪，$(document).ready()就会执行您的代码。如果要在加载映像后执行代码，则应$(window).load(function () {})

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

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

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

<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>

不要在这里使用$(document).ready。它将在DOMready 上执行处理程序，即通常不会加载图像。请改用$(window).load，甚至更好地在映像本身上注册加载处理程序。

相关文章：