新蛋网的首页是怎么实现用js控制css的


新蛋网的首页是怎么实现用js控制css的  我把它的效果弄下来发现只可以在首页实现 做其它的页面就实现不了实时控制 必须要重新载入页面 
<script language="javascript" type="text/javascript">
var resolution=0;if((document.documentElement.clientWidth || document.body.clientWidth)>=1217){resolution=1280;var bodyTag=document.getElementsByTagName("body")[0].className += " sw";}
</script>

解决方案 »

  1.   

    这代码很简单啊。每次加载到这段JS的时候会去获取一下浏览器的宽度，如果大于等于1217就给body加上一个sw样式。至于你说的只可以在首页实现，在其他页面实现不了实时控制不太理解你说的是什么意思，你把这段代码加到其他页面了么？
      

  2.   


    这个我理解，他的效果是这样的：
    比如我的显示器宽度是大于1280像素的，浏览器窗口在全屏状态下<body class="sw">；
    在缩小窗口到1024左右的时候，页面内容自动变成<body class="">；从而实现在样式选择器前面加.sw控制页面在缩放的时候实现不同的显示效果。但是我用同样的js带入到其他页面，浏览器窗口缩放之后页面内容还是保持原来的样式，<body class="">中的sw不会随着这个动作变化，而必须要在重新载入整个页面之后才会按照浏览器窗口的实际大小变化。
      

  3.   

    还是使用CSS自己的规则吧
    @media screen and (max-width: 1024px) {
        body{color:#000;}
    }@media screen and (min-width: 1280px) {
        body{color:#f00;}
    }
      

  4.   

    给window加上一个resize事件的监听嘛。。把这函数丢进去就完事了。
    window.onresize = function(){
        var resolution=0;if((document.documentElement.clientWidth || document.body.clientWidth)>=1217){resolution=1280;var bodyTag=document.getElementsByTagName("body")[0].className += " sw";}
    }