如果浏览器窗口小于给定大小，如何使用 Javascript 隐藏一些 ID 元素

How can I hide some ID elements using Javascript if the browser window is less than a given size?

本文关键字：隐藏 Javascript 何使用 元素 ID 小于 窗口 浏览器 如果      更新时间：2023-09-26

几个小时以来，我一直在寻找这个问题的答案，但找不到任何有用的东西。

如果浏览器窗口宽度小于给定大小，则网页不可见，我需要制作一些元素。 这是因为窗口左侧有一些固定位置的"按钮"，当翻转时会展开，但如果窗口的宽度小于约 1056 像素，则按钮会与主页内容重叠。

我有一个脚本用于返回窗口大小并将该值放入变量中。如果变量值小于 1056，我已经让它显示一条消息。（用于测试）

我已经看到了如何使用jQuery和Javascript使事物可见或不可见的方法，但它们都不适合我。

我试图隐藏的图像的 id 是 #go2。

以下是我一直试图开始工作的脚本的一部分：

if (viewportwidth <1056)document.write('<p>Your viewport width is LESS than 1056</p>');
if (viewportwidth <1056)document.getElementById('go2').style.display = 'none';

我不得不使用 {文字} 标签，因为页面使用的是 SMARTY 模板！

我对javascript和jQuery非常陌生，wouold感谢任何帮助。

谢谢。

若要确保在用户调整窗口大小时发生该行为，还可以绑定到 resize 事件：

jQuery(window).resize(function() {
   if(jQuery(window).width() < 1056) {
      jQuery(".hide-these").hide();
   }
});
你可以

用jQuery来做：

if(viewportwidth <1056) {
    $('.target').hide();
}

此外，您可以使用 CSS3 隐藏元素，如下所示：

@media only screen and (min-width: 1056px) {
    #go2 {
        display:none;
    }
}

CSS3 媒体查询在没有 Javascript 的情况下可以做你想做的事，但是浏览器支持非常不完整：http://www.w3.org/TR/css3-mediaqueries/

或者，你可以按照上面建议使用Javascript，但关于JS被打开等的通常警告。 JQuery使它更容易，如果你喜欢Javascript库：http://www.ilovecolors.com.ar/detect-screen-size-css-style/

如果没有，你可以谷歌有很多教程来解释如何使用Javascript查询窗口大小。

相关文章：