自动调整控件

有些时候我们要根据页面的大小而被动地让网页中控件的大小或位置来发生改变,最近本人也涉及到了这样的问题。
本人使用的方式有些笨,但是总体上还是可以实现的。

这里主要用到了两个事件 onload=""事件与 onresize=""事件。
先来说下思路:
本人使用onload控件是因为在页面载入完成后,再对控件进行调整,而ouresize控件则是在网页窗口大小改变时对控件进行调整。
下面来举例说明一下实现原理
比如说上面已经存在一个控件,下面也存在一个控件,而中间一个控件的高度要填充满剩下的部分,那么代码如下:

控件自动填充剩余部分

<script>
    function daxiao(){
        var obj=document.getElementById("main");
        var main_height=obj.offsetHeight;
        if (window.innerHeight)
        {var winHeight = window.innerHeight;}
        else if ((document.body) && (document.body.clientHeight))
        {var winHeight = document.body.clientHeight;}
        var a=(winHeight-main_height)/2;
        a=a.toFixed(0)-10;
        if(a>=1)
        {obj.style.marginTop=a+"px";}
        else
        {obj.style.marginTop="0px"; }
    }
</script>

控件自动填充剩余部分

<script>
function daxiao(){ 
    var h_0=document.getElementById("bottom").offsetTop;
    var h_1=document.getElementById("z_0").offsetTop;
    var z_w=h_0-h_1; 
    document.getElementById("z_l").style.height=z_w+"px";
    document.getElementById("z_r").style.height=z_w+"px"; }
</script>
阅读剩余
THE END