取代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的內容而不改變大小或滾動

回答

相關問題