脚本控制自适应高度的缩短问题- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 脚本控制自适应高度的缩短问题

技术文章搜索

关键字

Javascript 中的脚本控制自适应高度的缩短问题

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 247 ::

收藏到网摘: n/a

js正则实现的密码框简单制作,还可以替换成自己想用得符号兼容ie和firefox版本的js反选全选多选框

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="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 id="mainbox"> <div id="header"> </div> <div id="content-left"> 内容left 内容left 内容left 内容left 内容left 内容left 内容left 内容left 内容left 内容left 内容left </div> <div 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 全选提示:你可先修改部分代码,再按运行]

下面这个算法略有不同，你看哪一个效果更好（变化的瞬间人眼睛感觉到的闪烁更小）？

点击运行可以看到效果:

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

就是这几行代码：

复制代码代码如下:

 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值。
在我的显示器上，两个例子没有明显的差别。你可以把显示器的刷新频率调到最低，看看哪一种方式在变化的瞬间闪烁更小，择优用之。

js正则实现的密码框简单制作,还可以替换成自己想用得符号兼容ie和firefox版本的js反选全选多选框

Javascript 中的 脚本控制自适应高度的缩短问题

评论 (0) All

Javascript 中的脚本控制自适应高度的缩短问题