第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 ...
随机推荐
- 解决brew下载php（不存在libphp7.so）
我是一名PHP的初学者,在mac上安装php7参考作者 coolma <在mac中如何安装php7>: 1. 安装Homebrew(mac ox不可或缺套件管理器,方便快捷的安装插件等) ...
- Git项目管理
参考 参考书籍 <git学习指南> 参考网站 https://git-scm.com/ Git局限性讨论 高复杂度 两张图看懂集中式版本管理系统和分布式管理系统的区别-集中式vs分布式 g ...
- （数据科学学习手札41）folium基础内容介绍
一.简介 folium是js上著名的地理信息可视化库leaflet.js为Python提供的接口,通过它,我们可以通过在Python端编写代码操纵数据,来调用leaflet的相关功能,基于内建的osm ...
- 北京Uber优步司机奖励政策（4月9日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- 青岛Uber优步司机奖励政策（1月11日~1月17日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Java：break和continue关键字的作用
二者的作用和区别 1. break:直接跳出当前循环体(while.for.do while)或程序块(switch).其中switch case执行时,一定会先进行匹配,匹配成功返回当前case的值 ...
- ping telnet 指令
Ping 一 作用 ping能够辨别网络功能的某些状态,这些状态是日常网络故障诊断的基础.Ping能够识别连接的二进制状态(看是否连通).Ping命令通过过向计算机发送ICMP回应报文并监听回应报文的 ...
- 从golang的垃圾回收说起（上篇）
本文来自网易云社区 1 垃圾回收中的重要概念 1.1 定义 In computer science, garbage collection (GC) is a form of automatic me ...
- Ruby 基础教程 1-1
1.指定编码方式 第一种 在代码文件首行通过 #encoding:GBK的方式 第二种 ruby -E UTF-8 文件名称 第三种 irb -E UTF-8 2 ...
- RSA加密通信小结（二）-新版本APP与后台通信交互内容修改方案
注1:本次修改分为两步,首先是内容相关的修改,待其完成之后,再进行加密通信项(粗体字备注)修改. 1.新的提交后台的格式包括:data,token(预留字段,暂时后台不校验),userId(已有的不删 ...