第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 ...
随机推荐
- VS2013 执行Enable-Migrations，产生错误的解决办法
我的错误是:提示文件或资源没有找到”Microsoft.VisualStudio.Shell, Version=10.0.0.0, Culture=neutral, PublicKeyToken=b0 ...
- 12 垃圾回收GC
1.垃圾回收 1.) 小整数对象池 #提前建立好的 Python 对小整数的定义是 [-5, 257) 这些整数对象是提前建立好的,不会被垃圾回收.在一个 Python 的程序中,所有位于这个范 ...
- 3991: [SDOI2015]寻宝游戏
3991: [SDOI2015]寻宝游戏 https://www.lydsy.com/JudgeOnline/problem.php?id=3991 分析: 虚树+set. 要求树上许多点之间的路径的 ...
- SQL计算出百分比
有clients和lead_sources俩表.mysql数据库. lead_sources表结构类似: clients表中的lead_source_id是外键.现在要统计某时间段内client内每种 ...
- hdu1869六度分离(floyd)
六度分离 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- VIN码识别：毫秒间99%精准识别
科技改变生活.几年前,人工智能还仅是一个噱头,现在已逐渐融入我们的工作和生活,代替了一些重复性的.繁杂的人工劳动,在提高工作效率的同时,提升了客户体验. 车架号也叫VIN码,由17位数字和字母混合组成 ...
- 【selenium】selenium全分享
第一节:selenium基础 [http://note.youdao.com/noteshare?id=43603fb53593bfc15c28bc358a3fa6ec] 目录: selenium简介 ...
- linux部署MantisBT(二)部署php
二.部署php 1.下载php安装包 http://php.net/downloads.php 2.安装php yum install libxml2 yum install libxml2-deve ...
- 第六阶段·数据库MySQL及NoSQL实践 第2章·Redis
01-Redis简介 02-Redis基本安装启动 03-Redis的配置文件基本使用 04-Redis安全管理 05-Redis安全持久化-RDB持久化 06-Redis安全持久化-AOF持久化 0 ...
- Python 关键字参数和可变参数
关键字参数 如果你有一些具有许多参数的函数,而你又希望只对其中的一些进行指定,那么你可以通过命名它们来给这些参数赋值——这就是python关键字参数(Keyword Arguments)——我们使用命 ...