jquery获取元素各种宽高及页面宽高

如何使用jquery来获取网页里各种高度? 示例如下:

1 $(document).ready(function(){ 2     var divWidth = $("#div").width(),//width()返回元素的宽高,不包括padding/border/margin
3         divInnerWidth = $("#div").innerWidth(),//innerWidth()返回元素的宽高 + padding
4         divOuterWidth = $("#div").outerWidth(),//outerWidth()返回元素的宽高 + padding + border
5         divouterWidthTrue = $("#div").outerWidth(true);//outerWidth(true)返回元素宽高 + padding + border + margin
6     console.log(divWidth,divInnerWidth,divOuterWidth,divOuterWidthTrue);
7 })
 
 1 // 获取浏览器显示区域(可视区域)的高度 :
 2 $(window).height();
 3
 4 // 获取浏览器显示区域(可视区域)的宽度 :
 5 $(window).width();
 6
 7 // 获取页面的文档高度
 8 $(document).height();
 9
10 // 获取页面的文档宽度 :
11 $(document).width();
12
13 // 浏览器当前窗口文档body的高度:
14 $(document.body).height();
15
16 // 浏览器当前窗口文档body的宽度:
17 $(document.body).width();
18
19 // 获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
20 $(document).scrollTop();
21
22 // 获取滚动条到左边的垂直宽度 :
23 $(document).scrollLeft();
24
25 // 获取或设置元素的宽度:
26 $(obj).width();
27
28 // 获取或设置元素的高度:
29 $(obj).height();
30
31 // 某个元素的上边界到body最顶部的距离:
32 $(obj).offset().top;   // (在元素的包含元素不含滚动条的情况下)
33
34 // 某个元素的左边界到body最左边的距离:
35 $(obj).offset().left; // (在元素的包含元素不含滚动条的情况下)
36
37 // 返回当前元素的上边界到它的包含元素的上边界的偏移量
38 $(obj).offset().top // (在元素的包含元素含滚动条的情况下)
39
40 // 返回当前元素的左边界到它的包含元素的左边界的偏移量
41 $(obj).offset().left // (在元素的包含元素含滚动条的情况下)

原文地址:https://www.cnblogs.com/guoliping/p/11112395.html

时间: 2024-08-28 07:14:08

jquery获取元素各种宽高及页面宽高的相关文章

Jquery获取元素坐标

获取页面某一元素的绝对X,Y坐标,相对于浏览器窗体,可以用offset()方法: var X = $('#DivID').offset().top; var Y = $('#DivID').offset().left; 获取相对(父元素)位置: var X = $('#DivID').position().top; var Y = $('#DivID').position().left; 例如: var offset = $("#fontsize").position();$(&quo

jQuery -> 获取元素的各种过滤器(filter)

通过顺序来选择 顺序选择的过滤器(filter)有 :first 第一个元素 :last 最后一个元素 :even 序号为偶数的元素 :odd 序号为奇数的元素 :eq(n) 序号等于n的元素 :lt(n) 序号小于n的元素 :gt(n) 序号大于n的元素 如果有如下的表格 0 even 1 odd 2 even 3 odd 4 even html代码如下 <table> <tr><td>0</td><td>even</td><

JQuery获取元素的方法总结

JQuery获取元素的方法总结 一.说明   获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 做个总结,巩固下知识. 二.获取本身 1.只需要一种jQuery选择器   选择器 实例 说明 #Id $('#myId') ID选择器: 可以获取到ID为"myId"的元素,区分大小写 2.多种jQuery选择器组合 分为两部分:前半部分获取到的是一个元素集合,后半部分可以精确为一个元素,两者相结合,可以获取到想要的元素. 1)前半部分选择器   选择器 实例 说明 .c

Jquery获取元素方法

Jquery 获取元素的方法分为两种:jQuery选择器.jQuery遍历函数. 1.获取本身: a.只需要一种jQuery选择器 选择器 实例 说明 #Id $('#myId') ID选择器: 可以获取到ID为"myId"的元素,区分大小写 b.多种jQuery选择器组合 b1.jQuery选择器 选择器 实例 说明 .class $('.myClass') 类选择器:可以获取到class为'myClass'的所有元素 element $('p') 获取所有的<p>元素

jquery获取元素索引值index()

jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则

jquery获取元素位置

获取绝对位置坐标——offset()方法 var top = $(selector).offset().top; var left = $(selector).offset().left; 获取相对位置坐标——position()方法 var top = $(selector).position().top; var left = $(selector).position().left; jquery获取元素位置

js/jquery获取元素,元素筛选器

1.js获取元素 var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点 var previous = test.previousSbiling; //

Jquery获取元素高度

第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $("#div_id")第二步, 要看你要得到的是什么高度了, jQuery里现有的三个(其实是两个)获得高度的方法是:1. $("#div_id").height(); // 获得的是该div本身的高度, (不包含padding,margin,border)2. $(&qu

js jquery 获取元素(父节点,子节点,兄弟节点)

一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChild; // 第一个子节点 var last = test.lastChile; // 最后一个子节点 var previous = test.previ

js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选

转载:https://www.cnblogs.com/ooo0/p/6278102.html js jquery 获取元素(父节点,子节点,兄弟节点) 一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var chils = test.childNodes; // 全部子节点 var first = test.firstChil