通過JavaScript更改body標籤樣式

我試圖編寫一個腳本來改變頁面的寬度，考慮到用戶的客戶端寬度。這件事情是這樣的：通過JavaScript更改body標籤樣式

function adjustWidth() { 
    width = 0; 
    if (window.innerHeight) { 
     width = window.innerWidth; 
    } else if (document.documentElement && document.documentElement.clientHeight) { 
     width = document.documentElement.clientWidth; 
    } else if (document.body) { 
     width = document.body.clientWidth; 
    } 
    if (width < 1152) { 
     document.getElementsByTagName("body").style.width="950px"; 
    } 
    if (width >= 1152) { 
     document.getElementsByTagName("body").style.width="1075px"; 
    } 
} 
window.onresize = function() { 
    adjustWidth(); 
}; 
window.onload = function() { 
    adjustWidth(); 
};

有了這個劇本我從螢火蟲得到一個錯誤：

document.getElementsByTagName("body").style is undefined

現在的問題是，我怎麼能進入人體的風格？因爲在CSS工作表中它的選擇器和寬度屬性被定義。

來源

2012-07-30 Nojan

試**的getComputedStyle'（元素）[式]'**和示例**'window.getComputedStyle（document.body的）.width' ** .. 。學習http://javascript.info/tutorial/styles-and-classes-getcomputedstyle – KingRider 2016-03-24 12:03:09

該函數返回節點列表，即使只有一個<body>。

document.getElementsByTagName("body")[0].style = ...

現在，這就是說，您可能想要考慮用CSS而不是JavaScript來做這件事。通過CSS媒體查詢，您可以進行如下調整：

@media screen and (max-width: 1151px) { 
    body { width: 950px; } 
} 
@media screen and (min-width: 1152px) { 
    body { width: 1075px; } 
}

媒體查詢在IE9以及幾乎所有其他現代瀏覽器中均可使用。對於IE8，您可以回到JavaScript，或者讓身體成爲視口寬度的100％。

來源

2012-07-30 12:25:33 Pointy

非常感謝。與媒體查詢，我應該關心crossbrowser問題？ – Nojan 2012-07-30 12:31:00

@NOjAN以及IE8及更早版本不支持媒體查詢。否則他們會得到很好的支持，即使在iOS和Android等。 – Pointy 2012-07-30 12:34:08

不需要** getElementsByTagName **是存在錯誤其他瀏覽器，請嘗試**'document.body' ** – KingRider 2016-03-24 12:05:51

getElementsByTagName返回一個節點數組，因此您必須使用[]來訪問元素。

嘗試document.getElementsByTagName("body")[0].style

來源

2012-07-30 12:25:44

document.getElementsByTagName("body")[0].style

來源

2012-07-30 12:27:22 voodoo417

總是使用'document.body'而不是'document.getElementsByTagName（「body」）[0]' – 2017-07-24 02:36:43

我相信你從document.getElementsByTagName("body")是HTMLCollection會得到什麼。你應該可以使用document.getElementsByTagName("body")[0].style來得到你想要的。

來源

2012-07-30 12:31:53

document.getElementsByTagName('body')[0].style = 'your code';

例：

document.getElementsByTagName('body')[0].style = 'margin-top: -70px';

來源

2017-09-19 04:39:16

通過JavaScript更改body標籤樣式

回答

相關問題