Javascript 在更改窗口大小时显示实时宽度和高度值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7935722/
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
Display live width and height values on changing window resize
提问by gilly3
In html head:
在 html 头中：
<script type="text/javascript">
var myWidth = 0, myHeight = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth; myHeight = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) {
myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
myWidth = document.body.clientWidth; myHeight = document.body.clientHeight;
}
</script>
In html body:
在 html 正文中：
<script type="text/javascript">
document.write('<p>' + myWidth + 'x' + myHeight + '</p>');
</script>
It works good. The question is: how can I have it to display the width/height values while resizing the browser? Like here http://quirktools.com/screenfly/at bottom left corner.
它运作良好。问题是：如何在调整浏览器大小时让它显示宽度/高度值？像这里http://quirktools.com/screenfly/在左下角。
Many thanks!
非常感谢！
回答by Yorick
I like gilly3's solution, but it would be useful to have the full code (for those in a hurry!)
我喜欢gilly3的解决方案，但拥有完整的代码会很有用（对于那些赶时间的人！）
<script>
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
myWidth = window.innerWidth;
myHeight = window.innerHeight;
// your size calculation code here
document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
</script>
回答by gilly3
Bind to window.onresize. Don't use document.write(). Put the <p>in your HTML and give it an id. Then just set the innerHTML of the element directly:
绑定到window.onresize. 不要使用document.write(). 把 放在<p>你的 HTML 中并给它一个 id。然后直接设置元素的innerHTML即可：
window.onresize = displayWindowSize;
window.onload = displayWindowSize;
function displayWindowSize() {
// your size calculation code here
document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
};
回答by KyleMit
Or, if you're already using jquery, you can use .resize(handler)to capture the resize event and .resize()without any parameters to trigger the initial event when the window is done loading.
或者，如果您已经在使用 jquery，您可以使用它来捕获 resize 事件，并且在窗口加载完成时无需任何参数来触发初始事件。.resize(handler).resize()
Like this:
像这样：
$(window).resize(function() {
// your size calculation code here
$("#dimensions").html(myWidth);
}).resize();
Demo in Fiddle
小提琴演示
回答by Jai Prakash
<!DOCTYPE html>
<html>
<head>
<title>How to get width of screen when window is resizing?</title>
</head>
<body>
<script>
window.onresize=function()
{
document.body.innerHTML=window.innerWidth;
}
</script>
</body>
</html>
To learn the meaning of the each line of the code - https://jaischool.com/javascript-lang/how-to-get-live-width-of-window-when-it-is-resizing.html
了解每一行代码的含义 - https://jaischool.com/javascript-lang/how-to-get-live-width-of-window-when-it-is-resizing.html
