繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 脚本控制自适应高度的缩短问题
- Javascript
- 如何用js控制css中的float的代码
- Autocomplete Textbox Example javascript实现自动完成成功
- FormValid0.5版本发布，带ajax自定义验证例子
- wordpress之js库集合研究介绍
- 推荐发几个常用控件(新加DHTML控件)
- 7. Microsoft Online-Crash Control, version 6.0(微软在线崩溃控件)
- javascript下阻止表单重复提交、防刷新、防后退
- javascript下计数器每秒自动加1
- 给所有的超级练级都加上onmousemove时间的js代码
- js实现运行代码需要刷新的解决方法
- 兼容FF/IE跟随鼠标的层的效果
- 用javascript获得css中的属性值的代码
- 用javascript实现页内搜索的脚本代码
- 用javascript 控制表格行的展开和隐藏的代码
- 用javascript实现隐藏状态栏的代码
- Code: write(s,d) 输出连续字符串
- javascript创建页面蒙板的一些知识技巧总结
- 转自Jquery官方 jQuery1.1.3发布,速度提升800%,体积保持20K
- 用javascript判断输入数据是否货币并自动添加￥符号的代码
- js类中获取外部函数名的方法
Javascript 中的 脚本控制自适应高度的缩短问题
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 58 ::
收藏到网摘: n/a
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"。
点击运行可以看到效果:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
下面这个算法略有不同，你看哪一个效果更好（变化的瞬间人眼睛感觉到的闪烁更小）？
点击运行可以看到效果:
[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值。
在我的显示器上，两个例子没有明显的差别。你可以把显示器的刷新频率调到最低，看看哪一种方式在变化的瞬间闪烁更小，择优用之。
评论 (0) All
