js获取屏幕宽高

js中有几个获取屏幕宽高的属性,今天看书遇到有所困惑,所以查看资料对比以后记录下来以防以后忘记。

Element.clientWidth
Element.clientHeight

获取元素内部的宽度和高度,不包括滚动条和工具栏的宽度和高度。可以这样理解:clientWidth=CSS Width + CSS Padding - 滚动条宽度(如果存在),同样的clientHeight=CSS Height + CSS Padding - 滚动条宽度(如果存在)。

$(window)..width()
$(window).height()

获取元素的宽高,也是不包括滚动条和工具栏的宽度,与上一种方法获取到的宽高效果一样。

window.innerWidth
window.innerHeight

innerWidth获取到的宽度与前两种方法相比会包含纵向滚动条的宽度但不包含工具栏的宽度;innerHeight包含横向滚动条的宽度但不包含工具栏的宽度。

window.outerWidth
window.outerHeight

outerHeight包括了横向滚动条的宽度和工具栏的宽度。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,806评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,736评论 1 45
  • 写在前面: Window和document对象的区别 window对象表示浏览器中打开的窗口 window对象是可...
    给堕落一个理由先阅读 705评论 0 3
  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 2,254评论 0 5
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,246评论 4 61