本文主要是介绍【坑】在HTML页面中缺少!doctype html造成部分js代码失效问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">function sayhello() {alert("hello shushu");}function resizeRock() {document.getElementById("rockImg").style.height = (document.documentElement.clientHeight- 100) * 0.9;}
</script>
</head><body onLoad="sayhello();" onResize="resizeRock();"><div style="text-align:center; margin-top:100px;"><img src="http://www.baidu.com/img/bdlogo.png" id="rockImg">
</div>
</body>
</html>
问题描述:
这个页面的效果本来是通过获取浏览器窗口的高度来改变图片的大小的
如果把最上面的<!doctype html>(无论什么版本)去掉就会造成图片的缩放失效
解决办法:
在resizeRock()中改为
document.getElementById("rockImg").style.height = (document.body.clientHeight- 100) * 0.9+'px';
即可
产生原因:
因为没有加<!doctype html>没有加文档描述就会触发混杂模式在混杂模式下混杂模式下是比较多问题的,不加单位也可以,如果有文档声明就比较严格了,所以就需要单位了
注意
document.body.clientHeight这个东西要么就没有值,要么就是一个数字,不会自动给你加单位的
这篇关于【坑】在HTML页面中缺少!doctype html造成部分js代码失效问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!