javascript - 如何找到屏幕宽度并将其应用于特定的 css

Question

我需要找到用户屏幕宽度，并且需要将此宽度应用于样式。

我有一个container.

<div id="container">

</div>

我需要使用 JavaScript 或任何其他选项将宽度放入 css 中。

我怎样才能做到这一点？？提前感谢您的帮助。

Answer 1

要获取屏幕分辨率使用screen对象：

document.getElementById("container").style.width = screen.width + "px";

要获得浏览器窗口的宽度（对于除 IE6 及以下的所有浏览器，否则请检查此跨浏览器方法），请使用：

document.getElementById("container").style.width = window.innerWidth + "px";

另外，请注意，仅在文档完全加载时才应调用脚本。

演示：http: //jsfiddle.net/DNPNz/

Answer 2

对于这个CSS 媒体查询是最好的。像这样写：

@media screen and (max-width: 980px)
 {
      #container{
        background: #ccc;
      }
    }

查看更多http://webdesignerwall.com/tutorials/css3-media-queries

Answer 3

我相信你正在寻找的是这个。下面的代码将帮助您获取所有浏览器的宽度或高度。

function getViewPortSize()
{
    var viewportwidth;
    var viewportheight;

    // Standard browsers
    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6
    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
    {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    //Older IE
    else
    {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }

    return viewportwidth + "~" + viewportheight;
}

设置容器的宽度

window.onload = function() {
    document.getElementById("container").style.width = your_width_Here;
}

确保容器在 js 之前加载。我认为这是正确的语法

或者

我想如果你只想用 div 填充浏览器窗口的宽度。你可以只使用css

#container { width: 100%; }