$(window).width()与window.innerWidth的区别
window.innerWidth能获得什么数据?
在自适应设计中,需要用js来判断浏览器宽度,从而调整网页宽度和布局,我一开始用的是window.innerWidth。
window.innerWidth能获取当前窗口的宽度(包含滚动条),当浏览器宽度调整时,这个值也会跟着变化。
但是,window.innerWidth在IE8浏览器是无效的。所以,需要使用一个代替品,那就是$(window).width()。
$(window).width()与window.innerWidth有什么区别?
$(window).width()也是获得浏览器宽度的方法,但它跟window.innerWidth是不同的。
1)$(window).width()需要引用jquery.js文件,它是jquery方法。而window.innerWidth是js方法,不需要引用jquery.js文件。
2)它们获取的数值是不同的,window.innerWidth获取当前窗口的宽度(包含滚动条),$(window).width()获取当前窗口的宽度(不包含滚动条)。看下图所示:
$(window).width()与window.innerWidth的区别
知识扩展
Javascript、Jquery获取浏览器和屏幕各种高度宽度
Javascript:
alert(document.body.clientWidth); //网页可见区域宽(body)
alert(document.body.clientHeight); //网页可见区域高(body)
alert(document.body.offsetWidth); //网页可见区域宽(body),包括border、margin等
alert(document.body.offsetHeight); //网页可见区域宽(body),包括border、margin等
alert(document.body.scrollWidth); //网页正文全文宽,包括有滚动条时的未见区域
alert(document.body.scrollHeight); //网页正文全文高,包括有滚动条时的未见区域
alert(document.body.scrollTop); //网页被卷去的Top(滚动条)
alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)
alert(window.screenTop); //浏览器距离Top
alert(window.screenLeft); //浏览器距离Left
alert(window.screen.height); //屏幕分辨率的高
alert(window.screen.width); //屏幕分辨率的宽
alert(window.screen.availHeight); //屏幕可用工作区的高
alert(window.screen.availWidth); //屏幕可用工作区的宽
Jquery:
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height()); //浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width()); //浏览器当前窗口文档对象宽度
alert($(document.body).width()); //浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin
最新文章
- 浅析几种线程安全模型
- 微信截取菜单栏(不收回)
- ※编程随笔※=☆编程基础☆=※№ SVN工具自动属性 $Author$ $Date$ $Revision$ $URL$ $Header$替换...
- 新搭建mysql容易出现问题
- centos(7) 使用yum进行安装lamp环境
- 为什么苹果内购总是失败_IOS用户支付失败 购买无法完成解决教程
- 必须放在特定的文件夹中才能运行的Python程序
- 畅谈云原生(上):云原生应用应该是什么样子?
- MariaDB数据库服务常见操作
- 百度编辑器 UEditor 报错汇总
- 云计算相关的一些概念Baas、Saas、Iaas、Paas
- 联想打印机驱动安装报错
- Android SDK Manager设置HTTP Proxy Server代理服务器
- 下docfetcher先下Java,DocFetcher ── 以 JAVA 编写的开源桌面本地文件全文搜索工具...
- 利用Adams对单摆进行建模、仿真的动力学分析
- 微信降级adb备份android7.0,微信自动帮你更新7.0了?简单两步轻松降级
- 只需要一招,改变你的网易云皮肤(仅限于PC端)
- 微信小程序之设置所有页面背景颜色
- pip install时报错超时(pip._vendor.requests.packages.urllib3.exceptions.ReadTimeoutError: HTTPSConnec)解决方案
- C语言中数值后面跟字母解析
热门文章
- ECshop sina
- EDA实验课课程笔记(八 )——PT(Prime Time)简介(附录静态时序分析)
- verilog实现多周期处理器之——(零)GUN工具链的安装
- Win2008学习(九),Remote App发布MSI格式程序
- php 嵌套函数公式解析,Pyparsing,使用嵌套解析器解析php函数注释块的内容
- 《敏捷无敌》试读:第5章 成长的烦恼
- jquery 新建的元素事件绑定问题
- f77编程和c语言的区别,在fortran中l用F77编译器编译程序时出现问题?
- linux dev input使用消失_Linux驱动04 | 启动分析之根文件系统
- Html状态属性,html一些对象属性的介绍