腳本控制自適應高度的縮短問題

2019-11-21 01:54:42

字體：大中小

來源：轉載

供稿：網友

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";
}

我想用腳本來控制自適應高度，我用上面的代碼控制了左列和右列的自適應高度。
可是有的頁面因為內容多被撐得挺長，有的頁面內容少，用上面的代碼不能縮短了！
我就是想在訪問內容少的時候，內容還能再縮回來，代碼應該怎么寫呢？謝謝了！

復制代碼代碼如下:

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")，所以你直接用上面代碼的話，會出錯。需要人為調整style.overflowY="auto"。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="robots" content="all" /> <meta name="author" content="http://m.survivalescaperooms.com/"/> <meta name="copyright" content="yuehui|395959@qq.com|xyuehui888@msn.com" /> <meta name="description" content="根石家,根雕,木雕,藝術,作品,根書畫,介紹" /> <meta name="keywords" content="根石家,根雕,木雕,藝術,作品,根書畫,介紹" /> <title>根石家，根雕，木雕</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <div   class="iwvjtn8m0"   id="mainbox">     <div   class="iwvjtn8m0"   id="header">     </div>     <div   class="iwvjtn8m0"   id="content-left">         內容left         內容left         內容left         內容left         內容left         內容left         內容left         內容left         內容left         內容left         內容left     </div>     <div   class="iwvjtn8m0"   id="content-right">         <ul id="menu">             <li onclick="setm(1)"><a href="#" id="m1" onclick="vvheight()">55×65</a></li>             <li onclick="setm(2)"><a href="#" id="m2" onclick="vvheight()">60×80</a></li>             <li onclick="setm(3)"><a href="#" id="m3" onclick="vvheight()">90×90</a></li>             <li onclick="setm(4)"><a href="#" id="m4" onclick="vvheight()">110×73</a></li>             <li onclick="setm(5)"><a href="#" id="m5" onclick="vvheight()">118×53</a></li>             <li onclick="setm(6)"><a href="#" id="m6" onclick="vvheight()">146×53</a></li>             <li onclick="setm(7)"><a href="#" id="m7" onclick="vvheight()">170×65</a></li>             <li onclick="setm(8)"><a href="#" id="m8" onclick="vvheight()">其它</a></li>         </ul>         <div style="clear:both"></div>         <ul id="con1">             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1         </ul>         <ul id="con2">             內容2             內容2             內容2             內容2             內容2             內容2             內容2             內容2         </ul>         <ul id="con3">             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3         </ul>         <ul id="con4">             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4         </ul>         <ul id="con5">             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5         </ul>         <ul id="con6">             內容6             內容6             內容6             內容6             內容6             內容6         </ul>         <ul id="con7">             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7         </ul>         <ul id="con8">             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8         </ul>     </div>     <div style="clear:both"></div> </div> <script type="text/javascript">  </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

下面這個算法略有不同，你看哪一個效果更好（變化的瞬間人眼睛感覺到的閃爍更小）？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="zh-CN" /> <meta name="robots" content="all" /> <meta name="author" content="yuehui|395959@qq.com|xyuehui888@msn.com" /> <meta name="copyright" content="yuehui|395959@qq.com|xyuehui888@msn.com" /> <meta name="description" content="根石家,根雕,木雕,藝術,作品,根書畫,介紹" /> <meta name="keywords" content="根石家,根雕,木雕,藝術,作品,根書畫,介紹" /> <title>根石家，根雕，木雕</title> <style type="text/css">  </style> <script type="text/javascript">  </script> </head> <body> <div   class="iwvjtn8m0"   id="mainbox">     <div   class="iwvjtn8m0"   id="header">     </div>     <div   class="iwvjtn8m0"   id="content-left">         內容left         內容left         內容left         內容left         內容left         內容left         內容left         內容left         內容left         內容left         內容left     </div>     <div   class="iwvjtn8m0"   id="content-right">         <ul id="menu">             <li onclick="setm(1)"><a href="#" id="m1" onclick="vvheight()">55×65</a></li>             <li onclick="setm(2)"><a href="#" id="m2" onclick="vvheight()">60×80</a></li>             <li onclick="setm(3)"><a href="#" id="m3" onclick="vvheight()">90×90</a></li>             <li onclick="setm(4)"><a href="#" id="m4" onclick="vvheight()">110×73</a></li>             <li onclick="setm(5)"><a href="#" id="m5" onclick="vvheight()">118×53</a></li>             <li onclick="setm(6)"><a href="#" id="m6" onclick="vvheight()">146×53</a></li>             <li onclick="setm(7)"><a href="#" id="m7" onclick="vvheight()">170×65</a></li>             <li onclick="setm(8)"><a href="#" id="m8" onclick="vvheight()">其它</a></li>         </ul>         <div style="clear:both"></div>         <ul id="con1">             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1             內容1         </ul>         <ul id="con2">             內容2             內容2             內容2             內容2             內容2             內容2             內容2             內容2         </ul>         <ul id="con3">             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3             內容3         </ul>         <ul id="con4">             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4             內容4         </ul>         <ul id="con5">             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5             內容5         </ul>         <ul id="con6">             內容6             內容6             內容6             內容6             內容6             內容6         </ul>         <ul id="con7">             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7             內容7         </ul>         <ul id="con8">             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8             內容8         </ul>     </div>     <div style="clear:both"></div> </div> <script type="text/javascript">  </script> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

就是這幾行代碼：

復制代碼代碼如下:

    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中首創的DHTML屬性，并非W3C規范或技術推薦標準的內容，但是現在幾乎所有的瀏覽器都在支持這個屬性（這是因為W3C標準中并沒有相應的替代方案――因此我通常不提“標準”二字，而總是說“兼容、可用”）。scrollHeight是元素在內部不出現縱向滾動條的情況下在頁面上顯示時將占據的高度（像素數）。
[attach]64076[/attach]

clientHeight也不是W3C規范的東西（事實上，很多有用的東西都與“標準”無關，但它們是事實上的標準）。clientHeight是元素在頁面中顯示時實際占據的高度（像素數）。
[attach]64077[/attach]

如果使元素內部不出現縱向滾動條（給元素足夠多的空間，令其可以完整顯示；或者將其縱向滾動條禁用，也就是將style.overflowY設為"hidden"），則scrollHeight==clientHeight。

在滾動條出現時，clientHeight < scrollHeight，元素未能在頁面上完整顯示，若要令其完整顯示，則至少需要scrollHeight像素高度的空間。

也就是，元素內部出現縱向滾動條時，scrollHeight就是令元素得以完整顯示的最小高度。

在上面第一個例子中，我不斷縮短DIV的高度（每次縮短30像素），直到DIV內部滾動條出現，取此時的scrollHeight值。

在第二個例子中，我直接把DIV高度設為1像素，迫使其內部出現滾動條，取scrollHeight值。

在我的顯示器上，兩個例子沒有明顯的差別。你可以把顯示器的刷新頻率調到最低，看看哪一種方式在變化的瞬間閃爍更小，擇優用之。

上一篇：兼容ie和firefox版本的js反選全選多選框

下一篇：js正則實現的密碼框簡單制作,還可以替換成自己想用得符號