热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Js/Jquery获取当前对象大小以及屏幕分辨率等

1document.body.clientWidthBODY对象宽度2document.body.clientHeightBODY对象高度3document.documentE
1 document.body.clientWidth ==> BODY对象宽度

2 document.body.clientHeight ==> BODY对象高度3 document.documentElement.clientWidth ==> 可见区域宽度4 document.documentElement.clientHeight ==> 可见区域高度

5 window.screen.colorDepth ==> 屏幕彩色位数

   window.screen.deviceXDPI ==> 屏幕彩像素/英寸
6 document.body.clientWidth ==> 网页可见区域宽 7 document.body.clientHeight ==> 网页可见区域高8 document.body.offsetWidth ==> 网页可见区域宽(包括边线的宽) 9 document.body.offsetHeight ==> 网页可见区域高(包括边线的高) 10 document.body.scrollWidth ==> 网页正文全文宽document.body.scrollHeight ==> 网页正文全文高 11 document.body.scrollTop ==> 网页被卷去的高 12 document.body.scrollLeft ==> 网页被卷去的左 13 window.screenTop ==> 网页正文部分上 14 window.screenLeft ==> 网页正文部分左 15 window.screen.height ==> 屏幕分辨率的高 16 window.screen.width ==> 屏幕可用工作区宽度 17 window.screen.availHeight ==> 屏幕可用工作区高度 18 window.screen.availWidth ==> 屏幕可用工作区宽度

 部分jquery函数获取方法


1 // 部分jQuery函数
2 $(window).height()   //浏览器时下窗口可视区域高度
3 $(document).height()  //浏览器时下窗口文档的高度
4 $(document.body).height()      //浏览器时下窗口文档body的高度
5 $(document.body).outerHeight(true) //浏览器时下窗口文档body的总高度 包括border padding margin
6 $(window).width()   //浏览器时下窗口可视区域宽度
7 $(document).width() //浏览器时下窗口文档对于象宽度
8 $(document.body).width()      //浏览器时下窗口文档body的高度
9 $(document.body).outerWidth(true) //浏览器时下窗口文档body的总宽度 包括border padding

 


1 HTML精确定位: scrollLeft,scrollWidth,clientWidth,offsetWidth
2 scrollHeight: 获取对象的滚动高度。
3 scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
4 scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
5 scrollWidth: 获取对象的滚动宽度
6 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
7 offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
8 offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
9 event.clientX 相对文档的水平座标
10 event.clientY 相对文档的垂直座标
11 event.offsetX 相对容器的水平坐标
12 event.offsetY 相对容器的垂直坐标
13 document.documentElement.scrollTop 垂直方向滚动的值
14 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度




推荐阅读
  • 装饰者模式(Decorator):一种灵活的对象结构设计模式
    装饰者模式(Decorator)是一种灵活的对象结构设计模式,旨在为单个对象动态地添加功能,而无需修改原有类的结构。通过封装对象并提供额外的行为,装饰者模式比传统的继承方式更加灵活和可扩展。例如,可以在运行时为特定对象添加边框或滚动条等特性,而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ... [详细]
  • 利用REM实现移动端布局的高效适配技巧
    在移动设备上实现高效布局适配时,使用rem单位已成为一种流行且有效的技术。本文将分享过去一年中使用rem进行布局适配的经验和心得。rem作为一种相对单位,能够根据根元素的字体大小动态调整,从而确保不同屏幕尺寸下的布局一致性。通过合理设置根元素的字体大小,开发者可以轻松实现响应式设计,提高用户体验。此外,文章还将探讨一些常见的问题和解决方案,帮助开发者更好地掌握这一技术。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
  • 三大DOM属性系列详解
    本文详细介绍了offset、client和scroll三个系列的DOM属性,分别用于获取元素的位置、大小和滚动距离,并提供了相关注意事项。 ... [详细]
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • Framework7:构建跨平台移动应用的高效框架
    Framework7 是一个开源免费的框架,适用于开发混合移动应用(原生与HTML混合)或iOS&Android风格的Web应用。此外,它还可以作为原型开发工具,帮助开发者快速创建应用原型。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 秒建一个后台管理系统?用这5个开源免费的Java项目就够了
    秒建一个后台管理系统?用这5个开源免费的Java项目就够了 ... [详细]
  • 近日,我在处理一个复杂的前端问题时遇到了极大困扰。具体来说,我之前开发了一个功能丰富的纯jQuery代码的前端GridView控件,实现了多种功能和视觉效果,并在多个项目中表现良好。然而,最近在尝试应用 `border-box` 布局模式时,却遇到了意想不到的兼容性和性能问题。这提醒我们在条件尚未完全成熟的情况下,应谨慎使用 `border-box` 布局模式,以免引入不必要的复杂性和潜在的bug。 ... [详细]
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • POJ 2482 星空中的星星:利用线段树与扫描线算法解决
    在《POJ 2482 星空中的星星》问题中,通过运用线段树和扫描线算法,可以高效地解决星星在窗口内的计数问题。该方法不仅能够快速处理大规模数据,还能确保时间复杂度的最优性,适用于各种复杂的星空模拟场景。 ... [详细]
  • 本文详细探讨了使用纯JavaScript开发经典贪吃蛇游戏的技术细节和实现方法。通过具体的代码示例,深入解析了游戏逻辑、动画效果及用户交互的实现过程,为开发者提供了宝贵的参考和实践经验。 ... [详细]
  • 为开发者提供了一系列实用的参考网站和资源链接,包括HTML速查手册( 和 ),帮助开发者快速查找和学习相关技术知识。此外,还涵盖了其他重要的开发工具和文档,为编程工作提供全面支持。 ... [详细]
  • 本文全面解析了JavaScript中的DOM操作,并提供了详细的实践指南。DOM节点(Node)通常代表一个标签、文本或HTML属性,每个节点都具有一个nodeType属性,用于标识其类型。文章深入探讨了DOM节点的创建、查询、修改和删除等操作,结合实际案例,帮助读者更好地理解和掌握DOM编程技术。 ... [详细]
author-avatar
315热点关注
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有