第51天：封装可视区域大小函数client
一、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>
第51天：封装可视区域大小函数client的更多相关文章
- Javascript进阶篇——(DOM—节点---获取浏览器窗口可视区域大小+获取网页尺寸)—笔记整理
浏览器窗口可视区域大小获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法:一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerH ...
- AS3舞台的大小，可视区域大小及SWF文件的原始尺寸大小
AS3舞台的大小,可视区域大小及SWF文件的原始尺寸大小三者之间没有什么关系. 当前可视区域:stage.stageWidth,stage.stageHeight.SWF文件编译后的原始尺寸大小:lo ...
- Android获取窗口可视区域大小: getWindowVisibleDisplayFrame()
getWindowVisibleDisplayFrame()方法 getWindowVisibleDisplayFrame()是View类下的一个方法,从方法的名字就可以看出,它是用来获取当前窗口可视 ...
- JavaScript--DOM浏览器窗口可视区域大小
浏览器窗口可视区域大小 获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.inn ...
- 图解js中常用的判断浏览器窗体、用户屏幕可视区域大小位置的方法
有时我们需要获得浏览器窗口或屏幕的大小.窗口下拉框下拉的距离等数据,对应这些需求,js中提供了不少解决方法,只是数量稍多容易混淆它们各自的意义,下面咱们用图例来解释下12个常见对象属性的作用. 其中有 ...
- js获取浏览器窗口可视区域大小
获得浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)的方法: 一.对于IE9+.Chrome.Firefox.Opera 以及 Safari: • window.innerHeight - 浏 ...
- JS-特效 ～ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle（ele，attr） ；、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
- javascript中求浏览器窗口可视区域兼容性写法
1.浏览器窗口可视区域大小 1.1 对于IE9+.Chrome.Firefox.Opera 以及 Safari:• window.innerHeight - 浏览器窗口的内部高度• window. ...
- JS获取浏览器可视区域尺寸
本文所说的是浏览器窗口的可视区域大小,不是浏览器窗口大小,也非页面尺寸. 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth doc ...
随机推荐
- ACM数论-素数
ACM数论——素数 素数定义: 质数(prime number)又称素数,有无限个.质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数,这样的数称为质数.例 子:2.3.5.7.11.1 ...
- 【BZOJ3611】大工程（虚树，动态规划）
[BZOJ3611]大工程(虚树,动态规划) 题面 BZOJ Description 国家有一个大工程,要给一个非常大的交通网络里建一些新的通道. 我们这个国家位置非常特殊,可以看成是一个单位边权的树 ...
- Shr-前端汇总
F7控件监听 f7控件的监听是指,在点击F7控件时,对控件内的内容进行选中后出发该事件监听:通过参数value可以获取当前F7控件的一些值信息. //人力编制方案监听 回写计划期间 及分录数据 ini ...
- 代码混淆防止APP被反编译指南
本文来自网易云社区 安卓App安全包含很多内容,包括混淆代码.整体Dex加固.拆分 Dex 加固.虚拟机加固等方面.事实上,这些内容也是国内近几年Android App安全保护的一种主要趋势. 混淆代 ...
- Linux工作环境搭建
云主机工作环境搭建 网易云主机 需要申请弹性公网IP,不然需要OpenVPN才可以链接. 低于50块钱时,不能进行云主机创建. 更新yum源 cd /etc/yum.repos.d/ mkdir re ...
- PS 去皱纹
1.打开一个有皱纹的图片,选择修复画笔工具,按住Alt键吸取一块光滑的皮肤,然后再在有皱纹的位置上点击即可
- mysql新手进阶03
当年忠贞为国酬,何曾怕断头? 如今天下红遍,江山靠谁守? 业未就,身躯倦,鬓已秋. 你我之辈,忍将夙愿,付与东流? 数据库结构如下: 仓库(仓库号, 城市, 面积) 订购单(职工号, 供应商号, 订购 ...
- Java enum类型笔记
用途: 定义命令行参数,菜单选项,星期,方向(东西南北)等 与普通类的不同 有默认的方法 value() 每个enum类都已默认继承java.lang.Enum,所以enum类不能继承其他类 构造方法 ...
- Nginx与Ribbon的区别
服务器端负载均衡 Nginx Nginx 基于C语言,快速,性能高5w/s. Redis 5w/s,RibbatMQ 1.2w/s ApacheActiveMQ 0.6w/s 业务系统,kafka 2 ...
- 175. Invert Binary Tree【LintCode by java】
Description Invert a binary tree. Example 1 1 / \ / \ 2 3 => 3 2 / \ 4 4 解题:题目要求讲二叉树的左子树和右子树对调 ...