{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Evening l夕情丶 的问题《<!DOCTYPE html> prevents me from resizing my <i》','https://www.manongdao.com/q-1035545.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Recently I fall in love with HTML5(especially games), and I realize I should strengthen my JavaScript first, hence, I read Head First JavaScript(O'Reilly) to take a crack. I intended to display an img tag whose size is changing according to the different navigator size, but when I add !DOCTYPE html, img just cannot be resized.here is my simplified code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pet</title>
<link rel="stylesheet" href="style/rock.css">
<script type="text/javascript">
function resizeRock(){
document.getElementById("rock").style.height = ( document.body.clientHeight - 100 ) * 0.9;
}
</script>
</head>
<body onload="resizeRock();">
<div id="_rock">
<img src="image/rock.png" alt="Rock" id="rock"/>
</div>
</body>
</html>
If I remove !DOCTYPE html, everything goes well, but I'd like to know the reason, what's more, I'd like to know how to resize img tag in HTML5. Thanks!
When you add
<!DOCTYPE html>, you put the document into standards mode.There's a couple of changes you need to make to get this working. First, in standards mode, the page is only as high as it needs to be. So
document.body.clientHeightis just the height of your image and a little bit of margin. To make the height of the page match that of the viewport, as happens by default in quirks mode add this CSS:Second, in standards mode, you need to state the dimensions you're using when setting style.width and style.height. This is as easy as adding
+ "px"to the end of the size setting line, making itMost likely
<img>is being inline CSS element and you cannot set height for such elements.Add:
in your stylesheet.
Moer info