在浏览器窗口调整大小时更改JS逻辑
在浏览器窗口调整大小时更改JS逻辑
提问于 2012-08-06 22:43:19
随着使用CSS @media查询的流行，我们现在可以根据查看网页的分辨率设置网页样式。调整浏览器窗口的大小时，宽度相关的样式/布局将立即出现。在CSS中，这很简单，例如
// The heart of "responsive design."
@media screen and (max-width: 1000px) { ... }本着响应式设计的精神，我们可以在分辨率改变时动态调整JavaScript逻辑吗？例如，如果我们的脚本每10秒输出一个数字'5‘，当浏览器窗口大小调整为<300px时，我们是否可以将其更改为输出'7’(以相同的间隔)？
// Default script
setTimeout(function() {
var i = 5;
console.log(i);
}, 10000);
// How to change the value of i to 7, upon window resize?
// Ideally, without a page reload.回答 3
Stack Overflow用户
发布于 2012-08-06 22:50:38
处理window.resize事件：
window.onresize = function () {
// check if the new height/width is <300
// change your i variable
};为了使其正常工作，您的i变量必须位于resize处理程序和您传递给setTimeout的匿名处理程序共享的作用域中。
Stack Overflow用户
发布于 2012-08-06 22:47:43
您不能在CSS和JS之间准确地传递变量，但是Javascript公开了resize事件，您可以将该事件绑定到window。
例如：
function (event) {
if (event.srcElement.outerWidth <= 1000 ){
// do something
}
}Working JSFiddle Demo
Stack Overflow用户
发布于 2012-08-06 22:53:57
如果您想要的是每10秒显示一个数字(基于with)，代码如下：
setInterval(function() {
var num = (window.outerWidth <= 300) ? 7 : 5;
console.log(i);
}, 10000);如果你想要在调整窗口大小时显示数字，你应该处理window.reseize事件，就像@jbabey回答的那样。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11830541
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号