jquery获取关于宽度和高度的尺寸问题
作者原创,转载请出名出处!
console.log("可视区高度:"+$(window).height());
console.log("可视区宽度:"+$(window).width());
console.log("页面文档的高度:"+$(document).height());
console.log("页面文档的宽度:"+$(document).width());
console.log("浏览器当前窗口文档body的高度:"+$(document.body).height());
console.log("浏览器当前窗口文档body的宽度:"+$(document.body).width());
console.log("获取滚动条到顶部的垂直高度 (即网页被卷上去的高度):"+$(document).scrollTop());
console.log("获取滚动条到左边的垂直宽度 :"+$(document).scrollLeft());
console.log("获取或设置元素的宽度:"+$('#wrap').width());
console.log("获取或设置元素的高度:"+$('#wrap').height());
console.log("某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下):"+$("#wrap").offset().top);
console.log("某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下):"+$("#wrap").offset().left);
测试效果如下:

注:我的浏览器大小可能和你的不一样哦。所以,每个人的值都不一定是一样的。
jquery获取关于宽度和高度的尺寸问题的更多相关文章
- JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)
一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与 Margin 的宽度,四个加起来才是 di ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- JS获取各种宽度、高度的简单介绍:
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- JQuery获取当前屏幕的高度宽度
JQuery获取浏览器窗口宽高,文档宽高的代码,使用jquery的朋友可以参考下. <script type="text/javascript"> $(document ...
- JS 获取各个宽度和高度
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- JQuery获取元素宽度.width()与.css(‘width’)两个函数的区别
整理翻译自:http://blog.jquery.com/2012/08/16/jquery-1-8-box-sizing-width-csswidth-and-outerwidth/ 大意是: 在J ...
- javascript获取对象宽度和高度
标签元素的宽高值获取//绝对宽度Obj.offsetWidth//绝对高度Obj.offsetHeight 以下是获取窗口对象的宽高值.clientHeight 获取对象的高度,不计算任何边距.边 ...
- [Flex] 动态获取组件宽度和高度
flex中我们有时并不想一开始就设置某个组件的宽度和高度,而想动态获取某个组件经填充后的width和height,但是会发现width和height均为0,这时我们可以注册一下两个事件之一来解决. i ...
- JQuery获取浏览器窗口的高度和宽度
<script type="text/javascript"> $(document).ready(function() { alert($(window).heigh ...
随机推荐
- jQuery插件:jqGrid引入及基本属性
1. jqGrid下载 jqGrid下载地址: http://www.trirand.com/blog/ jqGrid Demo: http://www.guriddo.net/demo/guridd ...
- sizzle编译函数
一个人去完成一件事情,如果派多个人去做的话,只要配合默契,效率比一个人做肯定要高,效率提高,所需的时间就减少了.如果只能一个人完成,那么必须设法提高自己的劳动效率,这个提高可以是量的改变也可以是质的改 ...
- Android调用系统相机功能
在常规应用开发过程中,我们经常会使用到手机的相机功能,通过调用系统相机方便快捷的帮助我们实现拍照功能,本篇我将带领大家实现一下,如何通过调用系统相机实现拍照. 第一种:调用系统相机拍照,通过返回的照片 ...
- 【资源】108个大数据文档PDF开放下载-整理后打包下载
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 本博客其他.NET开源项目文章目录:h ...
- 创建 router 连通 subnet- 每天5分钟玩转 OpenStack(100)
上一节我们为 Neutron 虚拟路由器配置好了 L3 agent,今天将创建虚拟路由器“router_100_101”,打通 vlan100 和 vlan101. 打开操作菜单 Project -& ...
- 基于keepalived搭建MySQL的高可用集群
MySQL的高可用方案一般有如下几种: keepalived+双主,MHA,MMM,Heartbeat+DRBD,PXC,Galera Cluster 比较常用的是keepalived+双主,MHA和 ...
- css:图标与文字对齐的两种方法
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...
- Java内存模型深度解析:基础部分--转
原文地址:http://www.codeceo.com/article/java-memory-1.html 并发编程模型的分类 在并发编程中,我们需要处理两个关键问题:线程之间如何通信及线程之间如何 ...
- struts2学习笔记--OGNL表达式1
struts2标签库主要使用的是OGNL语言,类似于El表达式,但是强大得多,它是一种操作对象属性的表达式语言,OGNL有自己的优点: 能够访问对象的方法,如list.size(); 能够访问静态属性 ...
- 移动端 h5调试技巧
一 安卓 一 chrome 1.安卓手机安装chrome浏览器,手机打开开发者模式,用usb线链接电脑,并且允许调试. 2.电脑chrome地址栏输入 chrome://inspect 进入后点击 i ...