腳本控制自適應(yīng)高度的縮短問題
更新時間：2007年10月19日 22:27:45 作者：
function vvheight() {
var sideleft=document.getElementById("content-left").scrollHeight;
var sideright=document.getElementById("content-right").scrollHeight;
layoutHeight=Math.max(sideleft,sideright);
document.getElementById("content-left").style.height=layoutHeight+"px";
document.getElementById("content-right").style.height=layoutHeight+"px";
}
我想用腳本來控制自適應(yīng)高度，我用上面的代碼控制了左列和右列的自適應(yīng)高度。
可是有的頁面因為內(nèi)容多被撐得挺長，有的頁面內(nèi)容少，用上面的代碼不能縮短了！
我就是想在訪問內(nèi)容少的時候，內(nèi)容還能再縮回來，代碼應(yīng)該怎么寫呢？謝謝了！
function vvheight() {
var CL=document.getElementById("content-left");
var CR=document.getElementById("content-right");
while(parseInt(CL.scrollHeight)==parseInt(CL.style.height)){CL.style.height=parseInt(CL.style.height)-30+"px"}
var sideleft=CL.scrollHeight;
while(parseInt(CR.scrollHeight)==parseInt(CR.style.height)){CR.style.height=parseInt(CR.style.height)-30+"px"}
var sideright=CR.scrollHeight;
layoutHeight=Math.max(sideleft,sideright);
CL.style.height=layoutHeight+"px";
CR.style.height=layoutHeight+"px";
}
解答:
在IE和Opera里，DIV的style.overflowY的默認值是"auto"，上面的代碼不會有問題。
在Firefox和Safari里，DIV的style.overflowY的默認值是""(相當于"hidden")，所以你直接用上面代碼的話，會出錯。需要人為調(diào)整style.overflowY="auto"。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
下面這個算法略有不同，你看哪一個效果更好（變化的瞬間人眼睛感覺到的閃爍更?。?BR>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
就是這幾行代碼：
while(CL.scrollHeight==CL.clientHeight){CL.style.height=CL.clientHeight-30+"px"}
var sideleft=CL.scrollHeight;
while(CR.scrollHeight==CR.clientHeight){CR.style.height=CR.clientHeight-30+"px"}
沒有太多時間，就先隨便講一講吧。如果感興趣的人多，以后我可以開一些這樣的專題，或者寫到書里去。
元素的scrollHeight屬性是微軟在IE中首創(chuàng)的DHTML屬性，并非W3C規(guī)范或技術(shù)推薦標準的內(nèi)容，但是現(xiàn)在幾乎所有的瀏覽器都在支持這個屬性（這是因為W3C標準中并沒有相應(yīng)的替代方案——因此我通常不提“標準”二字，而總是說“兼容、可用”）。scrollHeight是元素在內(nèi)部不出現(xiàn)縱向滾動條的情況下在頁面上顯示時將占據(jù)的高度（像素數(shù)）。
[attach]64076[/attach]
clientHeight也不是W3C規(guī)范的東西（事實上，很多有用的東西都與“標準”無關(guān)，但它們是事實上的標準）。clientHeight是元素在頁面中顯示時實際占據(jù)的高度（像素數(shù)）。
[attach]64077[/attach]
如果使元素內(nèi)部不出現(xiàn)縱向滾動條（給元素足夠多的空間，令其可以完整顯示；或者將其縱向滾動條禁用，也就是將style.overflowY設(shè)為"hidden"），則scrollHeight==clientHeight。
在滾動條出現(xiàn)時，clientHeight < scrollHeight，元素未能在頁面上完整顯示，若要令其完整顯示，則至少需要scrollHeight像素高度的空間。
也就是，元素內(nèi)部出現(xiàn)縱向滾動條時，scrollHeight就是令元素得以完整顯示的最小高度。
在上面第一個例子中，我不斷縮短DIV的高度（每次縮短30像素），直到DIV內(nèi)部滾動條出現(xiàn)，取此時的scrollHeight值。
在第二個例子中，我直接把DIV高度設(shè)為1像素，迫使其內(nèi)部出現(xiàn)滾動條，取scrollHeight值。
在我的顯示器上，兩個例子沒有明顯的差別。你可以把顯示器的刷新頻率調(diào)到最低，看看哪一種方式在變化的瞬間閃爍更小，擇優(yōu)用之。
var sideleft=document.getElementById("content-left").scrollHeight;
var sideright=document.getElementById("content-right").scrollHeight;
layoutHeight=Math.max(sideleft,sideright);
document.getElementById("content-left").style.height=layoutHeight+"px";
document.getElementById("content-right").style.height=layoutHeight+"px";
}
我想用腳本來控制自適應(yīng)高度，我用上面的代碼控制了左列和右列的自適應(yīng)高度。
可是有的頁面因為內(nèi)容多被撐得挺長，有的頁面內(nèi)容少，用上面的代碼不能縮短了！
我就是想在訪問內(nèi)容少的時候，內(nèi)容還能再縮回來，代碼應(yīng)該怎么寫呢？謝謝了！
復制代碼 代碼如下:
function vvheight() {
var CL=document.getElementById("content-left");
var CR=document.getElementById("content-right");
while(parseInt(CL.scrollHeight)==parseInt(CL.style.height)){CL.style.height=parseInt(CL.style.height)-30+"px"}
var sideleft=CL.scrollHeight;
while(parseInt(CR.scrollHeight)==parseInt(CR.style.height)){CR.style.height=parseInt(CR.style.height)-30+"px"}
var sideright=CR.scrollHeight;
layoutHeight=Math.max(sideleft,sideright);
CL.style.height=layoutHeight+"px";
CR.style.height=layoutHeight+"px";
}
解答:
在IE和Opera里，DIV的style.overflowY的默認值是"auto"，上面的代碼不會有問題。
在Firefox和Safari里，DIV的style.overflowY的默認值是""(相當于"hidden")，所以你直接用上面代碼的話，會出錯。需要人為調(diào)整style.overflowY="auto"。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
下面這個算法略有不同，你看哪一個效果更好（變化的瞬間人眼睛感覺到的閃爍更?。?BR>
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
就是這幾行代碼：
復制代碼 代碼如下:
while(CL.scrollHeight==CL.clientHeight){CL.style.height=CL.clientHeight-30+"px"}
var sideleft=CL.scrollHeight;
while(CR.scrollHeight==CR.clientHeight){CR.style.height=CR.clientHeight-30+"px"}
沒有太多時間，就先隨便講一講吧。如果感興趣的人多，以后我可以開一些這樣的專題，或者寫到書里去。
元素的scrollHeight屬性是微軟在IE中首創(chuàng)的DHTML屬性，并非W3C規(guī)范或技術(shù)推薦標準的內(nèi)容，但是現(xiàn)在幾乎所有的瀏覽器都在支持這個屬性（這是因為W3C標準中并沒有相應(yīng)的替代方案——因此我通常不提“標準”二字，而總是說“兼容、可用”）。scrollHeight是元素在內(nèi)部不出現(xiàn)縱向滾動條的情況下在頁面上顯示時將占據(jù)的高度（像素數(shù)）。
[attach]64076[/attach]
clientHeight也不是W3C規(guī)范的東西（事實上，很多有用的東西都與“標準”無關(guān)，但它們是事實上的標準）。clientHeight是元素在頁面中顯示時實際占據(jù)的高度（像素數(shù)）。
[attach]64077[/attach]
如果使元素內(nèi)部不出現(xiàn)縱向滾動條（給元素足夠多的空間，令其可以完整顯示；或者將其縱向滾動條禁用，也就是將style.overflowY設(shè)為"hidden"），則scrollHeight==clientHeight。
在滾動條出現(xiàn)時，clientHeight < scrollHeight，元素未能在頁面上完整顯示，若要令其完整顯示，則至少需要scrollHeight像素高度的空間。
也就是，元素內(nèi)部出現(xiàn)縱向滾動條時，scrollHeight就是令元素得以完整顯示的最小高度。
在上面第一個例子中，我不斷縮短DIV的高度（每次縮短30像素），直到DIV內(nèi)部滾動條出現(xiàn)，取此時的scrollHeight值。
在第二個例子中，我直接把DIV高度設(shè)為1像素，迫使其內(nèi)部出現(xiàn)滾動條，取scrollHeight值。
在我的顯示器上，兩個例子沒有明顯的差別。你可以把顯示器的刷新頻率調(diào)到最低，看看哪一種方式在變化的瞬間閃爍更小，擇優(yōu)用之。
相關(guān)文章
js客戶端快捷鍵管理類的較完整實現(xiàn)和應(yīng)用
js客戶端快捷鍵管理類的較完整實現(xiàn)和應(yīng)用,需要的朋友可以參考下。2010-06-06
JavaScript設(shè)計模式之工廠模式和抽象工廠模式定義與用法分析
這篇文章主要介紹了JavaScript設(shè)計模式之工廠模式和抽象工廠模式,結(jié)合實例形式分析了工廠模式的功能、定義、相關(guān)問題解決方法,并分析抽象工廠模式與工廠模式的不同之處,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了javascript實現(xiàn)表格增刪改操作的實現(xiàn)方法,以實例形式較為詳細的分析了javascript操作表格的相關(guān)技巧,非常具有實用價值,需要的朋友可以參考下2015-05-05
這篇文章主要為大家詳細介紹了js指定步長實現(xiàn)單方向勻速運動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
JavaScript 語句之常用 for 循環(huán)詳解
這篇文章主要介紹了JavaScript 語句之常用 for 循環(huán)，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-03-03
本文主要介紹了JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接，避開已存在的鏈接和alt、title中的關(guān)鍵詞的方法。下面跟著小編一起來看下吧2017-02-02
不推薦使用getYear()這個函數(shù)，因為在火狐中顯示是不正確的，所以推薦使用getFullYear() 函數(shù)，接下來為大家詳細介紹下getYear函數(shù)在不同瀏覽下的使用問題2013-04-04
JavaScript編碼風格精選指南(編寫可維護的代碼規(guī)范)
javascript編碼規(guī)范能夠增強代碼的簡潔性、可讀性、可擴展性,項目做到后期,每修改一次,所耗費的成本就越高,編碼規(guī)范能節(jié)省這樣的成本,并且能很好拓展升級原有系統(tǒng)功能,javascript編碼規(guī)范也是開源社區(qū)大家約定俗成的規(guī)則！
2024-06-06 
這篇文章主要介紹了javascript下拉列表菜單的實現(xiàn)方法，采用table來封裝，我們知道table的每一行寫滿了之后，下一行會自動添加，文章末尾附有完整的代碼，需要的朋友可以參考下
2015-11-11