8.7w+
社区成员
请教关于document.body和documentElement 问题
最近在学javascript 新手，在看head first javascript 书的时候碰到的，请教大神！
翻了很多帖子，说是由于在有!DOCTYPE的情况下，在取值的时候需要用document.documentElement.clientHeight。而没有这个声明的时候用document.body.clientHeight。 但是我自己试的过程中，alert出来按照这个方法是有值的，但为什么在我的代码中，使用！DOCTYPE声明后，无论是用documentElement还是body，<img> 的大小都不会随着浏览器窗口大小变化而变化？
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function resizeRock(){
document.getElementById("testimage").style.height=(document.body.clientHeight-100)*0.9;
}
</script>
</head>
<body onload="resizeRock();" onresize="resizeRock();">
<div style="margin-top:10px; text-align:center">
<img id="testimage" src="images/0dd7912397dda1445e4c2ebfb0b7d0a20cf48672.jpg" alt="iRock" style="curosr:pointer" />
</div>
</body>
</html>
翻了很多帖子，说是由于在有!DOCTYPE的情况下，在取值的时候需要用document.documentElement.clientHeight。而没有这个声明的时候用document.body.clientHeight。 但是我自己试的过程中，alert出来按照这个方法是有值的，但为什么在我的代码中，使用！DOCTYPE声明后，无论是用documentElement还是body，<img> 的大小都不会随着浏览器窗口大小变化而变化？
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function resizeRock(){
document.getElementById("testimage").style.height=(document.body.clientHeight-100)*0.9;
}
</script>
</head>
<body onload="resizeRock();" onresize="resizeRock();">
<div style="margin-top:10px; text-align:center">
<img id="testimage" src="images/0dd7912397dda1445e4c2ebfb0b7d0a20cf48672.jpg" alt="iRock" style="curosr:pointer" />
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
似梦飞花 2015-08-01
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function resizeRock(){
var de=document.documentElement||document.body;
document.getElementById("testimage").style.height=(de.clientHeight-100)*0.9+'px';
}
</script>
</head>
<body onload="resizeRock();" onresize="resizeRock();">
<div style="margin-top:10px; text-align:center">
<img id="testimage" src="c1.png" alt="iRock" style="curosr:pointer" />
</div>
</body>
</html>天际的海浪 2015-08-01
- 打赏
- 举报
设置css
html, body { height: 100% }
引用!DOCTYPE的情况下，css属性要加单位的
document.getElementById("testimage").style.height=(document.body.clientHeight-100)*0.9 + "px";
qq_26915517 2015-08-01
- 打赏
- 举报
没效果，用了IE 跟FOX，只要引用!DOCTYPE的情况下，无论是body还是documentElement都无法自由伸缩，但是在教程里只有有<html>标签的情况下是可以的。
似梦飞花 2015-08-01
- 打赏
- 举报
function resizeRock(){
var de=document.documentElement||document.body;
document.getElementById("testimage").style.height=(de.clientHeight-100)*0.9;
}
这样试试
我一直以为是和浏览器有关的呢