通过JavaScript更改正文标记样式

Noj*_*jan 8 html javascript dom

我正在尝试编写一个脚本来改变页面的宽度,考虑用户的客户端宽度.它是这样的:

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();
};
Run Code Online (Sandbox Code Playgroud)

使用此脚本,我从Firebug收到错误:

document.getElementsByTagName("body").style is undefined
Run Code Online (Sandbox Code Playgroud)

现在我的问题是,我怎样才能获得身体的风格?因为在css表中定义了它的selector和width属性.

Poi*_*nty 18

该函数返回一个节点列表,即使只有一个节点<body>.

document.getElementsByTagName("body")[0].style = ...
Run Code Online (Sandbox Code Playgroud)

现在,也就是说,你可能想要用CSS而不是JavaScript来做这件事.使用CSS媒体查询,您可以进行此类调整:

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

媒体查询在IE9和几乎所有其他现代浏览器中都可以使用.对于IE8,您可以回退到JavaScript或只是让身体100%的视口宽度或东西.

  • 始终使用 `document.body` 而不是 `document.getElementsByTagName("body")[0]` (3认同)
  • 不需要 **getElementsByTagName** 是其他浏览器存在的 bug,试试 **`document.body`** (2认同)

voo*_*417 9

document.getElementsByTagName("body")[0].style
Run Code Online (Sandbox Code Playgroud)

  • 始终使用`document.body`而不是`document.getElementsByTagName("body")[0]` (2认同)

小智 6

document.getElementsByTagName('body')[0].style = 'your code';
Run Code Online (Sandbox Code Playgroud)

例子:

document.getElementsByTagName('body')[0].style = 'margin-top: -70px';
Run Code Online (Sandbox Code Playgroud)