第51天：封装可视区域大小函数client
2024-08-29 07:02:27
一、client 可视区域
offsetWidth: width + padding + border （披着羊皮的狼）
clientWidth： width + padding 不包含border
scrollWidth: 大小是内容的大小
二、检测屏幕宽度(可视区域)
1、ie9及其以上的版本
window.innerWidth
2、标准模式
document.documentElement.clientWidth
3、怪异模式
document.body.clientWidth
三、window.onresize 改变窗口事件
window.onscroll = function() {} 屏幕滚动事件
window.onresize = function() {} 窗口改变事件
onresize 事件会在窗口或框架被调整大小时发生
四、函数
function fun() { 语句 }
fun 是函数体的意思
fun() 调用函数 的意思
function fun() {
return 3;
}
console.log(fun); // 返回函数体 function fun() { retrun 3}
console.log(fun()); // 调用函数 3 返回的是结果
fun();
window.onresize = 3
window.onresize = function fun() { retrun 3}
五、检测屏幕宽度(分辨率)
clientWidth 返回的是 可视区 大小 浏览器内部的大小
window.screen.width 返回的是我们电脑的 分辨率 跟浏览器没有关系
六、封装可视区域大小的函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封装可视区域大小的函数</title>
</head>
<body> </body>
</html>
<script>
function client(){
if(window.innerWidth!=null){//IE9+和最新浏览器
return{
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode==="CSS1Compat"){//标准浏览器
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
} }
return{//怪异浏览器
width:document.body.clientWidth,
height:document.body.clientHeight
}
}
document.write(client().width);
</script>
最新文章
- Visual Studio 2013 Ultimate因为CodeLens功能导致Microsoft.Alm.Shared.Remoting.RemoteContainer.dll高CPU占用率的折中解决方案
- Win7+Docker(boo2docker)搭建php开发环境简略
- Spring urlMapping
- iOS开发之UITextView，设置textView的行间距及placeholder
- ionic 相关
- POJ 2315 最小费用最大流
- Android 自定义View修炼-仿360手机卫士波浪球进度的实现
- Page Object 模式编写UiAutomator脚本
- myisam MySQL 锁问题
- Java基础笔记-异常总结,包
- Python入门之中文乱码
- 产品设计-后台管理权限设计RBAC
- 增加删除的js
- js无间隙向上滚动
- lightoj1197 素数双筛，可以参考poj的那题双筛
- 数据库更新锁WITH UPDLOCK
- 团队项目第二周spec设计
- 常量引用 const T&
- 2014.9.11 Research Meeting Report
- C# 把string字符导出到txt文档方法