Home  >  Article  >  Web Front-end  >  Click directly on JS and Jquery to get the width and height code of the screen

Click directly on JS and Jquery to get the width and height code of the screen

coldplay.xixi
coldplay.xixiforward
2020-06-13 17:51:392097browse

Click directly on JS and Jquery to get the width and height code of the screen

JS, Jquery to get the width and height of the screen code


JS, Jquery code to obtain the width and height of the screen. There are many ways to obtain it, but no matter how many, the general built-in functions are still the same. Now I will simply list them.

Javascript gets the width and height code of the screen

The width of the visible area of ​​the web page: document.body.clientWidth

The height of the visible area of ​​the web page: document.body.clientHeight

The width of the visible area of ​​the web page: document.body.offsetWidth (including the width of the edges)

The height of the visible area of ​​the web page: document.body.offsetHeight (including the height of the edges)

The width of the full text of the web page : document.body.scrollWidth

The height of the full text of the web page: document.body.scrollHeight

The height of the web page being scrolled: document.body.scrollTop

The height of the web page being scrolled The left part of the web page: document.body.scrollLeft

The top part of the web page body: window.screenTop

The left part of the web page body part: window.screenLeft

The high screen resolution: window. screen.height

The width of the screen resolution: window.screen.width

The available working area height of the screen: window.screen.availHeight

The width of the available working area of ​​the screen: window .screen.availWidth

Jquery to get the width and height of the screen code

 $(document).ready(function(){
  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
  })

Recommended tutorial: "JS Basic Tutorial"

The above is the detailed content of Click directly on JS and Jquery to get the width and height code of the screen. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:liqingbo.cn. If there is any infringement, please contact admin@php.cn delete