的JavaScript變身ID（與CSS）動態相對於瀏覽器窗口大小

這裏是我有什麼，但它不工作：的JavaScript變身ID（與CSS）動態相對於瀏覽器窗口大小

if(window.width() < 1000) 
document.getElementsByTagName('body')[0].id="be" 
else 
document.getElementsByTagName('body')[0].id="bd" 
;

請告訴我，我寫錯了。請不要告訴其他解決方案，請修正此代碼。

基本上，如果瀏覽器窗口大小小於1000像素，我想爲網站的BODY標記賦予不同的ID。

來源

2011-04-05 techuser7777777

爲何不同ID？爲什麼不直接給它上課呢？另外，你是否得到錯誤？你怎麼知道它不工作？ – 2011-04-05 20:55:20

謝謝你的朋友！ = D – techuser7777777 2011-04-05 21:36:24

在這裏你去：

document.body.id = window.innerWidth < 1000 ? 'be' : 'bd';

將此代碼置於頁面的底部：

<script> 
    function setBodyId() { 
     document.body.id = window.innerWidth < 1000 ? 'be' : 'bd'; 
    }   
    window.onload = setBodyId; 
    window.onresize = setBodyId; 
</script>

現場演示：http://jsfiddle.net/simevidas/THqXB/

來源

2011-04-05 21:02:55

這看起來不錯，我該如何添加到我的JavaScript？新手在這裏... – techuser7777777 2011-04-05 21:07:56

@aaa你想執行此頁面加載？ – 2011-04-05 21:11:09

我希望它執行如下：當用戶使瀏覽器窗口變小時，如果他們使瀏覽器窗口小於1000px，那麼我想定義ID爲「be」 – techuser7777777 2011-04-05 21:13:54

你可以用javascript來做到這一點，但最佳的解決方案是使用CSS Media Queries來處理這樣的場景。

看到>CSS Media Queries as Browser Resizes?

來源

2011-04-05 20:58:09 neebz

請告訴更多。但是，如果有人對上述代碼有解決方案，請告訴我，因爲目的也是爲了更好地編寫JavaScript。 – techuser7777777 2011-04-05 21:02:49

window.width()不是一個函數。改爲使用window.innerWidth或window.outerWidth。（檢查瀏覽器的兼容性）

來源

2011-04-05 21:02:16 Wikeno

啊我在想那個。嘗試創意！大聲笑 – techuser7777777 2011-04-05 21:08:31

我推薦使用jQuery，一個JavaScript庫。它處理很多瀏覽器不兼容問題。例如，在IE中不支持innerWidth和outerWidth屬性。

這將工作的跨瀏覽器：

$(function(){ 
    $("body").attr("id", $(window).width() < 1000 ? "be" : "bd"); 
});

如果你想讓它改變，因爲調整窗口大小，你需要一個事件偵聽器添加到窗口調整大小事件：

$(window).resize(function(){ 
    $("body").attr("id", $(this).width() < 1000 ? "be" : "bd"); 
});

來源

2011-04-05 21:11:20 zdyn

這看起來也很棒。我應該在哪裏添加這個？ Javascript文件？索引主頁文件（它是index.php）？具體如何？例如，究竟應該將底部複製到我的JavaScript文件中？先謝謝你！ – techuser7777777 2011-04-05 21:16:45

也，我正在使用jquery – techuser7777777 2011-04-05 21:19:00

沒關係，我只是將該代碼添加到底部。不過，它調整了我的整個頁面。而如果我只是在index.php文件中手動定義「be」的ID，它適用於較小的窗口，並且不會弄亂我的頁面。 – techuser7777777 2011-04-05 21:26:02

的JavaScript變身ID（與CSS）動態相對於瀏覽器窗口大小

回答

相關問題