<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取window的宽度</title>
<style>
body {
height: 3000px;
border: 10px solid red;
}
</style>
</head>
<body>
<button>获取宽高</button>
<script>
// var innerWidth = 900; // XXXX
document.querySelector('button').onclick = function() {
console.log(window);
// 包含边框 滚动条的
// 但是在响应式页面中 不包含边框但包含滚动条
// console.log(innerWidth); // 可视区域/窗口文档显示区域的宽度 window.innerWidth
// console.log(innerHeight); // 可视区域/窗口文档显示区域的高度
// 返回值 不带单位
//
//
// 兼容写法
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log(w, h);
}
</script>
</body>
</html> 上述运行结果：
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
