考虑到用户的客户端宽度，我正在尝试编写一个脚本来更改页面的宽度。 它是这样的:
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 sheet 中定义了它的选择器和宽度属性。
最佳答案
该函数返回一个节点列表，即使只有一个 <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，或者让正文成为视口(viewport)宽度的 100% 或其他。
关于javascript - 通过 JavaScript 更改 body 标签样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11721501/