如果瀏覽器窗口小於給定大小，如何使用Javascript隱藏一些ID元素？

我一直在尋找這個問題的答案几個小時，並找不到任何有效的。如果瀏覽器窗口小於給定大小，如何使用Javascript隱藏一些ID元素？

如果瀏覽器窗口寬度小於給定大小，那麼如果網頁不可見，則需要製作一些元素。這是因爲窗口左側有一些固定位置的「按鈕」，當窗口翻轉時會展開，但如果窗口寬度小於約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非常陌生，並且非常感謝您的幫助。

謝謝。

來源

2011-05-18 jolly

你可以用CSS和jQuery做，這樣說的：HTTP：// CSS -tricks.com/resolution-specific-stylesheets/ – diEcho 2011-05-18 15:49:22

CSS3媒體查詢你想要做什麼沒有JavaScript，但瀏覽器的支持是相當不完整： http://www.w3.org/TR/css3-mediaqueries/

或者，你可以使用JavaScript如你上面建議的，有關JS通常的告誡被打開等。如果你喜歡Javascript庫，JQuery使它更容易： http://www.ilovecolors.com.ar/detect-screen-size-css-style/

如果沒有，那麼有很多教程可以讓Google解釋如何用Javascript查詢窗口大小。

來源

2011-05-18 15:40:18

謝謝！它現在可以工作，但我相信這些東西對未來的項目有用 – jolly 2011-05-20 11:34:56

你可以做，使用jQuery：

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

此外，您還可以隱藏與CSS3的元素，就像這樣：

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

來源

2011-05-18 15:41:38 Colum

謝謝，我已經嘗試過，但無法使其工作，所以嘗試了我的上述方法...我沒有意識到（這將向你展示我的知識水平）！是因爲我沒有一個「事件」來使它工作！我終於完成了（幾乎）正是我所需要的，通過將（document）.ready添加到我的腳本中，並且實際上改變了我正在做的事情，因此除非窗口大於給定大小，否則項目將隱藏在CSS中 - 按鈕沒有出現的方式在頁面加載完成後消失。 – jolly 2011-05-20 11:29:53

爲了確保當用戶改變行爲的發生窗口中，你也可以綁定到resize事件：

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

來源

2011-05-18 15:44:39

哦，這很有趣...我也許會看看這樣做。謝謝！ – jolly 2011-05-20 11:37:06

如果瀏覽器窗口小於給定大小，如何使用Javascript隱藏一些ID元素？

回答

相關問題