14

考虑到用户的客户端宽度，我正在尝试编写一个脚本来更改页面的宽度。是这样的：

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();
};

使用此脚本，我从 Firebug 收到错误消息：

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

现在我的问题是，我怎样才能访问身体的风格？因为在 css 表中定义了它的选择器和宽度属性。

4

5 回答 5

30

该函数返回一个节点列表，即使只有一个<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 或者只是让 body 是视口宽度的 100% 或其他东西。

于 2012-07-30T12:25:33.107 回答
11 
document.getElementsByTagName("body")[0].style
于 2012-07-30T12:27:22.937 回答
8 
document.getElementsByTagName('body')[0].style = 'your code';

例子：

document.getElementsByTagName('body')[0].style = 'margin-top: -70px';
于 2017-09-19T04:39:16.097 回答
4

getElementsByTagName返回一个节点数组，因此您必须使用它[]来访问元素。

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

于 2012-07-30T12:25:44.933 回答
3

我相信你得到的document.getElementsByTagName("body")是HTMLCollection. 你应该可以用document.getElementsByTagName("body")[0].style得到你想要的。

于 2012-07-30T12:31:53.383 回答