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

---

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

该函数返回一个节点列表，即使只有一个

现在，也就是说，您可能希望使用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%或其他内容。

getElementsByTagName

返回一个节点数组，因此必须使用

[]

访问元素

---

试试

document.getElementsByTagName（“body”）[0]。style

我相信你从

document.getElementsByTagName（“body”）

得到的是

HTMLCollection

。您应该能够使用

document.getElementsByTagName（“body”）[0].style

获取所需内容

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

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

例如：

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

---

非常感谢。对于媒体查询，我应该关注交叉浏览器问题吗？@NOjAN well IE8及更早版本不支持媒体查询。否则，即使在iOS和Android等浏览器上，它们也会得到很好的支持。不需要getElementsByTagName。如果其他浏览器存在漏洞，请尝试

document.body

始终使用

document.body

而不是

document.getElementsByTagName（“body”）[0]

尝试

getComputedStyle（elements）。[style]

和示例

window.getComputedStyle（document.body）.width

。。。了解始终使用

document.body

而不是

document.getElementsByTagName（“body”）[0]

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

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