我正在尝试编写一个脚本来更改页面的宽度,考虑用户的客户端宽度。 它是这样的:
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表中定义了它的selector和width属性。
答案 0 :(得分:18)
该函数返回一个节点列表,即使只有一个<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,或者只是让身体达到视口宽度的100%。
答案 1 :(得分:9)
document.getElementsByTagName("body")[0].style
答案 2 :(得分:3)
getElementsByTagName
返回一个节点数组,因此您必须使用[]
来访问元素。
尝试document.getElementsByTagName("body")[0].style
答案 3 :(得分:2)
我相信你从document.getElementsByTagName("body")
得到的是HTMLCollection
。您应该可以使用document.getElementsByTagName("body")[0].style
来获得所需内容。
答案 4 :(得分:1)
document.getElementsByTagName('body')[0].style = 'your code';
示例:
document.getElementsByTagName('body')[0].style = 'margin-top: -70px';