Question

我有一张这样的表：

<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'/＆gt;'

    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

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

Answer 1

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

Answer 2

我建议使用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>

Answer 3

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

Answer 4

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

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

4 个答案: