新手关于JS如何获取屏幕当前长宽的问题

如题,本人JS新手,想用Canvas画一幅图。

var div1 = document.getElementById("div1");
var canv1 = document.createElement("canvas");
div1.appendChild(canv1);

然后,为了是Canvas位于屏幕中心,需要获取屏幕长宽,百度得到的结果都说用

document.documentElement.clientHeight;

document.documentElement.clientWidth;

然而实际产生的结果是,div元素正确获得了当前窗口的宽度,但是高度却为0!

我又尝试了offsetHeight,但最终高度依然为0。而window.screen.height却可以正常获取屏幕高度。然而屏幕高度与窗口高度毕竟存在区别,我不想在这里妥协。

经过更多的百度,我终于明白,原来在IE9以前,document.documentElement.clientHeight;是有效的,然而到了IE9以后,以及其他主流浏览器如Chrome,firefox则是不支持的,它们有了新的语句

window.innerHeight;

window.innerWidth;

经过尝试,没有任何问题,js正确获得了窗口长宽。

所以说,即便是很简单的语句,也有可能随着更新换代而产生改变。当你熟悉的代码不管用时,记得看看版本。


发布了19 篇原创文章 · 获赞 0 · 访问量 1468

猜你喜欢

转载自blog.csdn.net/Z_ammo/article/details/79615710