javascript(和css一起用,魔幻布局的问题)

css行为暂时只有ie支持吧??ff不支持如果要兼容w3c浏览器,用js来控制吧window.onload=function()
{
var width=((document.documentElement.clientWidth||document.body.clientWidth)<850)?'760px':'960px';  
document.getElementById("container").style.width=width;
}

解决方案 »

  1.   

    非常感谢iloveC#的回答,我要的就是这个功能,如果可以的话希望你帮我补全一下,
    因为还有一个事件是onresize,如果只有一个的话,当网页第一次弹出时会出现BUG,
    另外,我还想请问下,
    当浏览器宽度小于850时,id为s的div有边框:
    s {
    border: solid 1px red;
    }当宽度大于850时无
    s {
    bodrder: none;
    }
      

  2.   

    不知道是不是这个意思??<html>
      <head>
        <style type="text/css">
          #container{border:solid 1px black;}
          .b{border:solid 1px red;}
          .nob{border:none;}
        </style>
      </head>
      <body>
    <script>
    function $(ObjId){return document.getElementById(ObjId);}
    function Handler()
    {
      var bodyWidth=document.documentElement.clientWidth||document.body.clientWidth;
      var resizeWidth=bodyWidth<850?760:960;
      $("container").style.width=resizeWidth+"px";  if(bodyWidth<850)  
        $("s").className="b";
      else
        $("s").className="nob";
    }
    window.onload=window.onresize=Handler;//初始化和改变大小时
    </script><div id="container">id="container"的内容</div>
    <div id="s">id="s"的内容</div>
    </body>
    </html>
      

  3.   

    不是太懂,我自己根据你第一次提供的写了一个,实现效果了,但是傲游偶尔会出一点问题,IE,FF,Opera,mini裸奔等表现都还可以!不知道是傲游的问题还是我的问题.我写的JS如下(我不懂java,完全模仿的,不要笑哦,也不会用循环语句):
    function doOnLoad()
    {
    magic();
    }
    function doOnResize()
    {
    magic();
    }
    function magic()
    {
    var width=((document.documentElement.clientWidth||document.body.clientWidth)<850)?'760px':'960px';  
    document.getElementById('container').style.width=width;
    if (width == '960px')
    {
    document.getElementById('container').style.background='url(images/body_bg.gif) 760px 146px no-repeat';document.getElementById('ss01').style.border='none';
    document.getElementById('ss02').style.border='none';
    document.getElementById('ss03').style.border='none';
    document.getElementById('ss04').style.border='none';
    document.getElementById('ss05').style.border='none';
    document.getElementById('ss06').style.border='none';
    document.getElementById('ss07').style.border='none';
    document.getElementById('ss08').style.border='none';document.getElementById('xx01').style.border='none';
    document.getElementById('xx02').style.border='none';
    document.getElementById('xx03').style.border='none';
    document.getElementById('xx04').style.border='none';
    document.getElementById('xx05').style.border='none';
    document.getElementById('xx06').style.border='none';
    document.getElementById('xx07').style.border='none';
    document.getElementById('xx08').style.border='none';
    }
    else
    {
    document.getElementById('container').style.background='none';document.getElementById('ss01').style.border='solid 1px #cccccc';
    document.getElementById('ss02').style.border='solid 1px #cccccc';
    document.getElementById('ss03').style.border='solid 1px #cccccc';
    document.getElementById('ss04').style.border='solid 1px #cccccc';
    document.getElementById('ss05').style.border='solid 1px #cccccc';
    document.getElementById('ss06').style.border='solid 1px #cccccc';
    document.getElementById('ss07').style.border='solid 1px #cccccc';
    document.getElementById('ss08').style.border='solid 1px #cccccc';document.getElementById('xx01').style.border='solid 1px #cccccc';
    document.getElementById('xx02').style.border='solid 1px #cccccc';
    document.getElementById('xx03').style.border='solid 1px #cccccc';
    document.getElementById('xx04').style.border='solid 1px #cccccc';
    document.getElementById('xx05').style.border='solid 1px #cccccc';
    document.getElementById('xx06').style.border='solid 1px #cccccc';
    document.getElementById('xx07').style.border='solid 1px #cccccc';
    document.getElementById('xx08').style.border='solid 1px #cccccc';
    }
    }