请教关于document.body和documentElement 问题

qq_26915517 2015-08-01 07:58:08
最近在学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>


...全文
76 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
似梦飞花 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; } 这样试试 我一直以为是和浏览器有关的呢

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧