现在的位置: 首页 > 综合 > 正文

【javascript脚本】动态设置div的高度和宽带

2014年05月12日 ⁄ 综合 ⁄ 共 1411字 ⁄ 字号 评论关闭

【javascript脚本】动态设置div的高度和宽带

1、问题:经常用到gridview因为列太多  导致撑大浏览器出现浏览器窗口级别的滚动条;

2、续上面的问题:这个时候需要在gridview外面嵌套一个div  div设置具体的宽度,那么无论里面的gridview有多少列 有多宽 都不会导致窗口出现滚动条 只可能让div出现滚动条, 这样在用户体验方面 可以更加好些;

3、因为div要设置具体的宽度  所以不同的显示器下面  这样的显示效果不一样;有的很难看、有的不错;

4、根据以上问题 可以通过javascript  在窗体的resize事件中 动态设定div的大小;

这样显示会更加美观些……

 

一、Html页面:

<inputtype="text"name="availHeight"size="4"/><br/>

<inputtype="text"name="availWidth"size="4"/><br/>

<divid="div1"style="background-color:Graywidth:616pxheight305px;"></div>

 

 

注:三个html控件  动态将当前窗口的高度、宽度写入 input 输入框里面;

动态改变div1 的宽度;

 

二、javascript代码:

 

?
<scripttype="text/javascript">
 
    var winWidth=0;
 
    var winHeight=0;
 
    function findDimensions()
{
//函数:获取尺寸
 
        //获取窗口宽度
 
        if (window.innerWidth)
{
 
            winWidth
= window.innerWidth;
 
        }
 
        elseif
((document.body) && (document.body.clientWidth)) {
 
            winWidth
= document.body.clientWidth;
 
        }
 
        //获取窗口高度
 
        if (window.innerHeight)
{
 
            winHeight
= window.innerHeight;
 
        }
 
        elseif
((document.body) && (document.body.clientHeight)) {
 
            winHeight
= document.body.clientHeight;
 
        }
 
        //通过深入Document内部对body进行检测,获取窗口大小
 
        if (document.documentElement
&& document.documentElement.clientHeight && document.documentElement.clientWidth) {
 
            winHeight=document.documentElement.clientHeight;
 
            winWidth=document.documentElement.clientWidth;
 
        }
 
        

抱歉!评论已关闭.