第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 ...
随机推荐
- github上的golang双向rpc，基于原生“net/rpc”库实现，可以注册回调
github上的golang双向rpc,基于原生“net/rpc”库实现,可以注册回调.仅支持一个server和一个client交互. 地址:https://github.com/rocket049/ ...
- python 的 购物小程序
money = input('请输入您的工资:') shop = [("iphone",5800),("ipod",3000),("book" ...
- 北京Uber优步司机奖励政策（3月15日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 北京Uber优步司机奖励政策（12月21日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 我错了的N个学习
其实在面对自己的失误的时候,勇敢的说我错了,就是我错了,不找借口,不找理由,然后就开始分析错误的原因,分析,总结,学习,提高,成为自己成长的垫脚石,这个才是正确的做法,做人要拿出精神头,拼死至休的劲头 ...
- 第五模块·WEB开发基础-第2章JavaScript基础
第1章 JavaScript基础 01-JavaScript历史介绍 02-JavaScript的组成 03-JavaScript的引入方式 04-变量的使用 05-基本数据类型(一) 06-基本数据 ...
- 第一阶段·Linux运维基础-第2章·Linux系统目录结构介绍
01 变量与PS1 02 添加用户 03 关闭SELinux 04 关闭iptables 05 显示中文乱码排查过程 06 总结 07 目录结构课程内容 08 Linux目录结构特点 09 Linux ...
- python学习笔记02 --------------基础数据类型
python的基本数据类型: 1.基本数据 1.1. 数字类型 1.1.1 整数 int int() #将括号内内容转化为整数类型. 1.1.2 浮点数 float 1.1.3 复 ...
- 本地矩阵（Local Matrix）
本地矩阵具有整型的行.列索引值和双精度浮点型的元素值,它存储在单机上.MLlib支持稠密矩阵DenseMatrix和稀疏矩阵Sparse Matrix两种本地矩阵,稠密矩阵将所有元素的值存储在一个列优 ...
- win32绘制自定义类窗口导致绘制11个窗口的解决办法
上网查了一圈也没有找到解决问题的办法,一旦创建了一个窗口,并且在过程函数中绘制窗口,尤其是一些非子窗口的自定义类窗口,都会生成11个窗口(算上主窗口就是12个),但是使用系统通用控件就不会有这种情况的 ...