JavaScript获取当前窗口内的宽度和高度汇总

 更新时间:2023年02月20日 08:14:18   作者:hongmin118  
这篇文章主要介绍了JavaScript获取当前窗口内的宽度和高度汇总的相关资料,需要的朋友可以参考下

小编给大家分享一下JS与Jquery如何获取屏幕、浏览器、页面的宽度和高度的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

JavaScript获取窗口宽高:

var s = "";  
s += "\r\n网页可见区域宽:"+ document.body.clientWidth;  
s += "\r\n网页可见区域高:"+ document.body.clientHeight;  
s += "\r\n网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)";  
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";  
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;  
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;  
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;  
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;  
s += "\r\n网页正文部分上:"+ window.screenTop;  
s += "\r\n网页正文部分左:"+ window.screenLeft;  
s += "\r\n屏幕分辨率的高:"+ window.screen.height;  
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;  
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;  
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;  
s += "\r\n你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";  
s += "\r\n你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";  
alert(s);

Jquery如何获取屏幕、浏览器、页面的宽度和高度

//高度:
$(window).height();                                  //浏览器当前窗口可视区域高度
$(document).height();                              //浏览器当前窗口文档的高度
$(document.body).height();                     //浏览器当前窗口文档body的高度
$(document.body).outerHeight(true);      //浏览器当前窗口文档body的高度
//总高度包括border, padding, margin

//宽度:
$(window).width();                                     //浏览器当前窗口可视区域宽度
$(document).width();                                 //浏览器当前窗口文档对象宽度
$(document.body).width();                        //浏览器当前窗口文档body的高度
$(document.body).outerWidth(true);         //浏览器当前窗口文档body的

到此这篇关于JavaScript与jQuery获取当前窗口内的宽度和高度汇总的文章就介绍到这了,更多相关js与jQuery得到当前窗口内的宽度和高度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript中的alert()函数使用技巧详解

    JavaScript中的alert()函数使用技巧详解

    这篇文章主要介绍了JavaScript中的alert()函数使用技巧详解,本文讲解了普通弹出、带换行的文本、使用制表符、使用变量、使用样式等选择,需要的朋友可以参考下
    2014-12-12
  • JS双向链表实现与使用方法示例(增加一个previous属性实现)

    JS双向链表实现与使用方法示例(增加一个previous属性实现)

    这篇文章主要介绍了JS双向链表实现与使用方法,在之前链表的基础上增加一个previous属性实现的双向链表功能,需要的朋友可以参考下
    2019-01-01
  • Bootstrap页面标题Page Header的实现方法

    Bootstrap页面标题Page Header的实现方法

    这篇文章主要为大家详细介绍了Bootstrap页面标题Page Header的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 去除JavaScript对象中空值和空对象的四种方式

    去除JavaScript对象中空值和空对象的四种方式

    开发时遇到一个问题,需要将对象中的空值和空对象去除,所以这篇文章主要给大家介绍了关于去除JavaScript对象中空值和空对象的四种方式,需要的朋友可以参考下
    2023-09-09
  • 深入理解JavaScript 解构赋值

    深入理解JavaScript 解构赋值

    JavaScript的解构赋值是ES6引入的语法,允许以简洁的方式从数组或对象中提取数据并赋值给变量,包括数组解构、对象解构、参数解构、变量交换等,它可以大幅简化代码,提高开发效率,下面就一起来了解一下
    2024-09-09
  • JavaScript获取radio选中值的几种常用方法小结

    JavaScript获取radio选中值的几种常用方法小结

    这篇文章主要介绍了JavaScript获取radio选中值的几种常用方法,结合实例形式总结分析了javascript获取radio选中值的常见实现方法与操作注意事项,需要的朋友可以参考下
    2023-06-06
  • JS查找字符串中出现最多的字符及个数统计

    JS查找字符串中出现最多的字符及个数统计

    最近在项目中遇到这样的需求:求字符串'nininihaoa'中出现次数最多字符。怎么实现呢?下面小编给大家分享具体实现代码,需要的朋友参考下吧
    2017-02-02
  • JS+HTML5实现图片在线预览功能

    JS+HTML5实现图片在线预览功能

    这篇文章主要为大家详细介绍了JS+HTML5实现图片在线预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 彻底理解JavaScript的原型与原型链

    彻底理解JavaScript的原型与原型链

    原型和原型链是js中的难点也是重点,明白了原型和原型链会让我们在后面不管是学习还是工作都会更加高效,这篇文章主要给大家介绍了关于JavaScript原型与原型链的相关资料,需要的朋友可以参考下
    2021-10-10
  • 移动端效果之Swiper详解

    移动端效果之Swiper详解

    这篇文章主要为大家详细介绍了移动端效果之Swiper的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论