使用过程中需要主要获取的高度范围包含 盒子模型中的哪些元素、
height() : 其高度范围是所匹配元素的高度 height;(content 的高度)
innerHeight() : 其高度范围是所匹配元素的高度 height + padding ;
outerHeight() : 其高度范围是所匹配元素的高度height + padding + border ;
outerHeight(true) : 其高度范围是所匹配元素的高度 height + padding + border + margin ;
同理宽度有: width() | innerWidth() | outerWidth() | outerWidth(true)
jq不会出现这样的问题的,检查下代码存放位置是否正确。另外您的jq是什么版本的?另外如果实在取不到那就用这个
网页可见区域宽: documentbodyclientWidth网页可见区域高: documentbodyclientHeight
网页可见区域宽: documentbodyoffsetWidth (包括边线的宽)
网页可见区域高: documentbodyoffsetHeight (包括边线的高)
网页正文全文宽: documentbodyscrollWidth
网页正文全文高: documentbodyscrollHeight
网页被卷去的高: documentbodyscrollTop
网页被卷去的左: documentbodyscrollLeft
网页正文部分上: windowscreenTop
网页正文部分左: windowscreenLeft
屏幕分辨率的高: windowscreenheight
屏幕分辨率的宽: windowscreenwidth
屏幕可用工作区高度: windowscreenavailHeight
屏幕可用工作区宽度: windowscreenavailWidth
。。。。
documentbodyclientWidth 用这个原生的 比jq快得快
获取步骤如下所示。
1:可以使用定时器setInterval,每秒获取一次浏览器的宽和高。
2:使用jQuery可以这样获取window的宽高。
3:宽度 $(window)width() ,高度$(window)height(),自己写个函数,设定定时器的时间。
4:<body onresize="showSize()"> ,页面相关事onresize浏览器的窗口大小被改变时触发此事件。
strInfo+=\r\n网页可见区域高:+documentbodyclientHeight;
strInfo+=\r\n网页可见区域宽:+documentbodyoffsetWidth+(包括边线的宽);
strInfo+=\r\n网页可见区域高:+documentbodyoffsetHeight+(包括边线的高);
strInfo+=\r\n网页正文全文宽:+documentbodyscrollWidth;
strInfo+=\r\n网页正文全文高:+documentbodyscrollHeight;
strInfo+=\r\n网页被卷去的高:+documentbodyscrollTop;
strInfo+=\r\n网页被卷去的左:+documentbodyscrollLeft;
strInfo+=\r\n网页正文部分上:+windowscreenTop;
strInfo+=\r\n网页正文部分左:+windowscreenLeft;
strInfo+=\r\n屏幕分辨率的高:+windowscreenheight;
strInfo+=\r\n屏幕分辨率的宽:+windowscreenwidth;
strInfo+=\r\n屏幕可用工作区高度:+windowscreenavailHeight;
strInfo+=\r\n屏幕可用工作区宽度:+windowscreenavailWidth;
windowconfirm(strInfo);
</script
-----------------------------------------------------------------------------------------
最近编程中发现html静态页面的开发可以使用
documentbodyClientHeight
来获得页面的高度,但aspnet的页面却无法这样获取,获取到的只是页面最小的高度,比如页面只有一个button,那么该js语句获得的就是24。
documentdocumentElementOffsetHeight
----------------------------------------------------------------------------------------加上documentbodyscrollLeft;
documentbodyscrollTop;
x=documentbodyclientWidth+documentbodyscrollLeft;
y=documentbodyclientHeight+documentbodyscrollTop;若想得到整个页面的高度可以用
有两种方式
(1)使用flash处理 flash可以读取返回的宽高没问题,此种方式客户端就可以处理
(2)还有一个就是使用服务端处理,服务端读取已经上传的,这样也可以得到
一、途径:
第一种情况就是宽高都写在样式表里,就比如#div1{width:120px;}。这中情况通过#div1stylewidth拿不到宽度,而通过#div1offsetWidth才可以获取到宽度。
第二种情况就是宽和高是写在行内中,比如style="width:120px;",这中情况通过上述2个方法都能拿到宽度。
二、小结:
因为idoffsetWidth和idoffsetHeight无视样式写在样式表还是行内,所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过idstyleatrr来获取。
三、代码:
var o = documentgetElementById("view");
var h = ooffsetHeight; //高度
var w = ooffsetWidth; //宽度
参考资料
js获取Html元素的实际宽度高度的方法脚本之家[引用时间2017-12-29]
alert($(window)height()); //浏览器时下窗口可视区域高度
alert($(document)height()); //浏览器时下窗口文档的高度
alert($(documentbody)height());//浏览器时下窗口文档body的高度
alert($(documentbody)outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window)width()); //浏览器时下窗口可视区域宽度
alert($(document)width());//浏览器时下窗口文档对于象宽度
alert($(documentbody)width());//浏览器时下窗口文档body的高度
alert($(documentbody)outerWidth(true));
jquery
$(function(){
/调整窗口自动调整宽度/
$(window)resize(function(){
var h = $(window)height();
var w = $(window)width();
consoleinfo("窗口高度:" + h + "; 窗口宽度:" + w);
});
});
以上就是关于jQuery 获取容器宽度和长度全部的内容,包括:jQuery 获取容器宽度和长度、jquery获取浏览器的宽度和高度怎么做的为啥$(window).width()不行呢、jquery或js 如何时时获取浏览器当前的宽和高等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)