js各种宽高(2)

在javascript和jquery中,都有对各种高度的写法,在这里,我们就着重讲一下窗口、文档等高度的理解。(宽度和高度差不多!)

jquery的各种高度

首先来说一说$(document)和$(window),如下:

 

用一句话理解就是:当网页滚动条拉到最低端时,

 

$(document).height() == $(window).height() + $(window).scrollTop()。

注意,是拉到最低端!

当网页高度不足浏览器窗口时$(document).height()返回的是$(window).height()

假如您要获取整个网页的高度,不建议用$("html").height()、$("body").height()的高度

原因:

$("body").height():body可能会有边框,获取的高度会比$(document).height()小;

$("html").height():在不同的浏览器上获取的高度的意义会有差异,说白了就是浏览器不兼容。

说道这里,提及边框和margin还有padding,我们自然想到了jquery的另外的两个高度,那就是innerHeight()和outerHeight()

innerHeight()和outerHeight()不适用于window 和 document对象,对于window 和 document对象可以使用.height()代替。innerHeight()和outerHeight()主要用来获取标签的高度。

innerHeight()

innerHeight:高度+补白outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距

 

innerHeight(value)

这个“value”参数可以是一个字符串(数字加单位)或者是一个数字,如果这个 “value”参数只提供一个数字,jQuery会自动加上像素单位(px)。如果只提供一个字符串,任何有效的CSS尺寸都可以为高度赋值(就像 100px, 50%, 或者 auto)。注意在现代浏览器中,CSS高度属性不包含padding, border, 或者 margin, 除非box-sizingCSS属性被应用。

jquery高度,放到浏览器中试一下

alert($(window).height());                           //浏览器当前窗口可视区域高度alert($(document).height());                        //浏览器当前窗口文档的高度alert($(document.body).height());                //浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));  //浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width());                            //浏览器当前窗口可视区域宽度alert($(document).width());                        //浏览器当前窗口文档对象宽度alert($(document.body).width());                //浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));  //浏览器当前窗口文档body的总宽度 包括border padding margin

 

javascript的各种高度

 

网页可见区域宽[仅针对body]: document.body.clientWidth网页可见区域高[仅针对body]: document.body.clientHeight网页可见区域宽[仅针对body]: document.body.offsetWidth (包括滚动条和边框,若滚动条和边框为0,则和clientWidth相等)网页可见区域高[仅针对body]: document.body.offsetHeight (包括滚动条和边框,若滚动条和边框为0,则和clientHeight相等)可视窗口宽度(包括滚动轴宽度):window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari可视窗口高度,不包括浏览器顶部工具栏: window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari网页正文全文宽(不包括滚动轴的宽度): document.body.scrollWidth网页正文全文高:document.body.scrollHeight//假如网页中没有滚动轴,document.body.scrollWidth和window.innerWidth相等,document.body.scrollHeight和window.innerHeight相等。网页被卷去的高: document.body.scrollTop网页被卷去的左: document.body.scrollLeft网页正文部分上: window.screenTop网页正文部分左: window.screenLeft屏幕分辨率的高(整个屏幕的高度): window.screen.height屏幕分辨率的宽(整个屏幕的宽度): window.screen.width屏幕可用工作区高度: window.screen.availHeight屏幕可用工作区宽度: window.screen.availWidth整个浏览器可用工作区高度: window.outerHeight整个浏览器可用工作区宽度: window.outerWidth

注意,在运用jquery的innerHeight()和outerHeight()的时候,可能会有浏览器的兼容问题,不同浏览器出现不同高度,总之,实践得真知,你可以测试一下,写几个小的demo,总结一下!

原博

时间: 2024-11-08 21:48:56

js各种宽高(2)的相关文章

JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度

1.文档的高,屏幕的文档区域的高 document.body.clientHeight 2.有效的高,屏幕可视的高 document.documentElement.clientHeight 3.屏幕的总高度 document.documentElement.scrollHeight 4.滚动的高度 document.documentElement.scrollTop js代码 <script>// 获取有效的宽和高,屏幕可视的宽 高 var winX = document.documentE

js各种宽高(1)

在javascript中操作dom节点让其运动的时候,常常会涉及到各种宽高以及位置坐标等概念,如果不能很好地理解这些属性所代表的意义,就不能理解js的运动原理,同时,由于这些属性概念较多,加上浏览器之间 实现方式不同,常常会造成概念混淆,经过研究之后,这里来进行一个总结. 第一部分:DOM对象 1.1只读属性 所谓的只读属性指的是DOM节点的固有属性,该属性只能通过js去获取而不能通过js去设置,而且获取的值是只有数字并不带单位的(px,em等),如下: 1)clientWidth和client

JS处理图片宽高

JS快速获取图片宽高的方法 快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一步进入这个过程. 一.简陋的获取图片方式 1 2 3 4 5 6 7 8 9 10 11 // 图片地址 后面加时间戳是为了避免缓存 var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.

js各种宽高的理解

1.window.innerHeight.window.outerHeight  窗口的外层的高度/内层高度 2.window.innerWidth/window.outerWidth  窗口的外层的宽度/内层宽度 3.window.screen包含有关用户屏幕的信息 window.screen.width window.screen.height window.screen.availWidth(可视化的宽度) window.screen.availHeight(可视化的高度) window.

js/jq宽高的理解与运用

document:1. 与client相关的宽高document.body.clientWidthdocument.body.clientHeightdocument.body.clientLeftdocument.body.clientTop 2. 与offset相关的宽高 3. 与scroll相关的宽高 网页滚动到顶部或底部: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=

JS 各种宽高

1.window的各种宽高   outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览器窗口的高度,包括侧边栏(如果存在).窗口镶边(window chrome)和调整窗口大小的边框(window resizing borders/handles) innerHeight 浏览器视口的高度(单位:像素),如果存在水平滚动条则包括它 outerWidth 获取浏览器窗口外部的宽度(单位

js各种宽高意义总结

1.window的各种宽高   outerWidth.innerWidth.outerHeight.innerHeight outerHeight 获取浏览器窗口外部的高度(单位:像素).表示整个浏览器窗口的高度,包括侧边栏(如果存在).窗口镶边(window chrome)和调整窗口大小的边框(window resizing borders/handles) innerHeight 浏览器视口的高度(单位:像素),如果存在水平滚动条则包括它 outerWidth 获取浏览器窗口外部的宽度(单位

js 浏览器 宽高 各种

常用: JS 获取浏览器窗口大小 // 获取窗口宽度   if (window.innerWidth)   winWidth = window.innerWidth;   else if ((document.body) && (document.body.clientWidth))   winWidth = document.body.clientWidth;   // 获取窗口高度   if (window.innerHeight)   winHeight = window.inner

js获取宽高

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei