js和jquery获取屏幕宽高以及加margin和padding等边距的宽高
Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高: document.body.scrollTop 网页被卷去的左: document.body.scrollLeft 网页正文部分上: window.screenTop 网页正文部分左: window.screenLeft 屏幕分辨率的高: window.screen.height 屏幕分辨率的宽: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度: window.screen.availWidth |
JQuery
1 2 3 4 5 6 7 8 9 10 11 12 | $(document).ready( function (){ $(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的总宽度 包括border padding margin }) |
div的宽高:
1 2 3 4 5 6 7 8 9 10 11 | $( function (){ $( "div" ).width(); //div的width $( "div" ).innerWidth(); //div的padding+width $( "div" ).outerWidth(); //div的padding+width+border $( "div" ).outerWidth( true ); //div的padding+width+border+margin $( "div" ).height(); //div的height $( "div" ).innerHeight(); //div的padding+height $( "div" ).outerHeight(); //div的padding+height+border $( "div" ).outerHeight( true ); //div的padding+height+border+margin }) |
标签:
JQuery
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 本地部署 DeepSeek:小白也能轻松搞定!
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 我们是如何解决abp身上的几个痛点
· 如何基于DeepSeek开展AI项目