取代div的内容而不改变大小或滚动

我想写一些代码，用新的内容加载（通过ajax）时用占位符替换旧内容。取代div的内容而不改变大小或滚动

<div id="target"> 
... 
</div>

在AJAX请求响应周期，我想和一个“装载”消息或图像替换目标div的内容。

到目前为止，这是简单的...

然而，在某些情况下，目标小，和其他目标较大。在任何情况下，我都不希望目标div的大小发生变化或出现滚动条。如果加载消息或图像需要被裁剪，那就这样做。

'target'div的签名（id，class，style）在整个过程中必须保持不变，我无法在目标div上设置宽度+高度。

我不想依赖收到新内容时正在执行的附加代码。

你将如何处理这个问题，只使用基本的javascript/dhtml和/或prototype-js。

谢谢，p。

来源

2010-09-13 pstanton

// prototype 
Object.prototype.updateFixedSizeHtml = function(html) 
{ 
    this.innerHTML = "<div style='width:" + this.clientWidth + "px;height:" + this.clientHeight + "px;overflow:hidden;display:block;padding:0;border:0;margin:0'>" + html + "</div>"; 
} 
// usage 
document.getElementById('target').updateFixedSizeHtml('New Content');

来源

2010-09-13 04:33:57 tidwall

我不认为'clientWidth'是所有html元素（即div）的标准属性，也不是由prototype-js提供的。 – pstanton 2010-09-13 21:30:56

它应该在大多数（全部是现代？）浏览器中可用。我发布的例子只是DHTML。不需要prototype-js框架。 https://developer.mozilla.org/en/DOM/element.clientWidth http://msdn.microsoft.com/en-us/library/ms533566(VS.85).aspx – tidwall 2010-09-13 23:43:45

这是最好的我能想出现在：

function loading(id, content) 
{ 
    var elem = $(id); 
    if (!elem) 
     return; 

    var dim = elem.getDimensions(); 
    var width = dim.width - parseInt(elem.getStyle("padding-left")) - parseInt(elem.getStyle("padding-right")); 
    var height = dim.height - parseInt(elem.getStyle("padding-top")) - parseInt(elem.getStyle("padding-bottom")); 

    elem.innerHTML = "<div style=\"position:relative; overflow:hidden; padding:0; margin:0; border:0; width:" + width + "px; height:" + height + "px;\">" /* */ 
      + content + "</div>"; 
}

随意张贴一个更好的解决方案！

来源

2010-09-13 04:24:56 pstanton

取代div的内容而不改变大小或滚动

回答

相关问题