请教关于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>

...全文

81 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; } 这样试试我一直以为是和浏览器有关的呢

话说取值习惯用a||b，当0遇上0，这句话就是一句废话！我的问题是这样的：首先页面有滚动条，滚动条位于初始位置（最顶上），然后我点击一个按钮，缓动到底部，这个时候，就会发生见鬼的0与0的对决。 //jQuery代码 function toBottom(){ var el = null, scrollHeight = Math.max(document.body.scrol...

kefu=function(id,_top,_right){varme=id.charAt?document.getElementById(id):id,d1=document.body,d2=document.documentElement;me.style.top=_top?_top+'px':0;me.style.right=_ri...kefu=function (id,_top,_rig...

这个是兼容的我公司的项目就用的这个获取的。 function ScollPostion() {//滚动条位置 var t, l, w, h; if (document.documentElement && document.documentElement.scrollTop) { t = document.do...

软键盘挤压导致软键盘上面有块小的布局如上图，我这里用的是mui-scroll-wrapper区域滚动，占了布局的90%，其余10%就是底部布局我这里监听了textarea的focus事件，当点击输入框的时候调用下面代码：var height = document.documentElement.clientHeight || document.body.clientHeight;var f...

我的移动web项目,页面第一次加载正常在内容重新从顶部渲染,但是当滑动到底部,点击底部的数据,跳转后,跳转后页面的定位和上一页的定位一致,不是在顶部的,在电脑和部分机型是正常的,但是在华为,vivo,和部分苹果机上就出现上述问题了我在router中添加scrollBehavior(to, from, savedPosition) {return {x: 0,y: 0}}和router.afterE...