通过JavaScript更改body标签样式

Question

通过JavaScript更改body标签样式

20

我想编写一个脚本来根据用户的客户端宽度改变页面宽度。

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

我的问题是如何访问<body>的样式？因为在CSS表中已经定义了它的选择器和宽度属性。

- Nojan

尝试使用 getComputedStyle(elements).[style] 和示例 window.getComputedStyle(document.body).width ... 学习请访问 http://javascript.info/tutorial/styles-and-classes-getcomputedstyle - KingRider

6个回答

13

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

- voodoo417

4

应始终使用document.body而非document.getElementsByTagName("body")[0]。 - dr.dimitru

11

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

例子：

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

- Naing Min Khant

4

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

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

- Snow Blind

3

我相信你从 document.getElementsByTagName("body") 得到的是 HTMLCollection。您应该能够使用 document.getElementsByTagName("body")[0].style 来获取您想要的内容。

- shannon.stewart

1

如评论中所指出的（但奇怪的是仍然缺少答案），实际上应该是{{link1：document.body.style}}。例如，document.body.style.backgroundColor = "#3f3f3f";。

- gaspar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pointy · Accepted Answer

那个函数返回一个节点列表，即使其中只有一个<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％。