javascript 如何找到屏幕宽度并将其应用于特定的 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10653019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find the screen width and apply it to a particular css
提问by Libin
I need to find the user screen width and needs to apply this width to a style.
我需要找到用户屏幕宽度并需要将此宽度应用于样式。
I have a container.
我有一个container.
<div id="container">
</div>
I need to put the width into css using JavaScript or any other options.
我需要使用 JavaScript 或任何其他选项将宽度放入 css 中。
How can I do this?? Thanks for help in advance.
我怎样才能做到这一点？？提前感谢您的帮助。
回答by VisioN
To get the screen resolution use screenobject:
要获取屏幕分辨率使用screen对象：
document.getElementById("container").style.width = screen.width + "px";
To get the width of you browser window (for all browsers except IE6 and below, otherwise check this cross-browser method) use:
要获取浏览器窗口的宽度（对于除 IE6 及以下的所有浏览器，否则请检查此跨浏览器方法）使用：
document.getElementById("container").style.width = window.innerWidth + "px";
Also, pay attention that the script should be called only when the document is fully loaded.
另外，请注意，只有在文档完全加载时才应调用脚本。
回答by sandeep
For this CSS media queriesis best. Write like this:
对于这个CSS 媒体查询是最好的。像这样写：
@media screen and (max-width: 980px)
{
#container{
background: #ccc;
}
}
Check this for more http://webdesignerwall.com/tutorials/css3-media-queries
回答by Huangism
I believe what you are looking for is this. the code below will help you grab the width or height for all browsers.
我相信你正在寻找的是这个。下面的代码将帮助您获取所有浏览器的宽度或高度。
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;
}
to set width for container
为容器设置宽度
window.onload = function() {
document.getElementById("container").style.width = your_width_Here;
}
make sure the container is loaded before the js. i think that's the correct syntax
确保在 js 之前加载容器。我认为这是正确的语法
Or
或者
I think if you just want to div to fill the browser window width. you can just use css
我想如果你只是想 div 来填充浏览器窗口的宽度。你可以只使用 css
#container { width: 100%; }
