Home > Developer > Web Develop
Get dimensions
As follows:
Heigh ([VAL|FN])
Width ([VAL|FN])
Innerheight ()
Innerwidth ()
Outerheight ([soptions])
Outerwidth ([options])
Here is a brief introduction (here is a lot of jquery is to return both the value of matching elements, but also to set the value of matching elements)
Height () Gets the altitude value (px) of the current calculation of the matching element.
Width () Gets the value (px) of the current calculation for the first matching element.
/ These 2 methods are valid for both visible and hidden elements. In addition, this filler is padding/
Innerheight () Gets the inner area height of the first matched element (including padding, excluding borders).
Innerwidth () Gets the inner area width of the first matched element (including padding, excluding borders).
/ These 2 methods are valid for both visible and hidden elements. In addition, this padding is margin (when the outerheight () value is true, the margin will be included as an example)/
Outerheight ([soptions]) Gets the outer height (including padding and borders) of the first matching element.
Outerwidth ([options]) Gets the inner area width of the first matched element (including padding, excluding borders).
Here is an example:
CSS code block
<style type="Text/css"> . Div{ width: px ; Height: + px ; background-color: Green ; padding: tenpx ; Border: px solid #009999 ; margin: px ;} </style>jquery code block
$(function(){ console.log($(‘div‘).width()+‘+‘+$(‘div‘).innerWidth()+‘+‘+$(‘div‘).outerWidth()); var k = $(‘div‘).height()+‘+‘+ $(‘div‘).innerHeight()+‘+‘+$(‘div‘).outerHeight()+‘+‘+$(‘div‘).outerHeight(true) ; alert(k);})
HTML code block
<body> <div class="div"></div></body>
The results of the feedback return are:
alert==>>120+140+164+204
console==>>150+170+194
From (k = (the d I v- ).heIg hT()+ ′ + + (' div '). Innerheight () + ' + ' + (the d I v- ).ouTeRH eIg hT()+ ′ + + (' div '). Outerheight (True)) we can get:
$ (' div '). Height () is 120
$ (' div '). Innerheight () =120+padding (left,right) 10+10=140
$ (' div '). Outerheight () =140+border (left,right) 12+12=164
$ (' div '). Outerheight (True) =164+margin (left,right) 20+20=204
So then we understand the use of the Get element data.
This is the same thing as Width,innerwidth,outerwidth.
Next, get get scroll data element scrolling
First look at an example
$ (document). Ready (function () { $ (document). Click (function () { Alert ($ (window). scrolltop ()); }) });
<body ; <span ; span</span ; < p ; in Pass</p ; <h1 ; p_h1 </h1 ; <p ; Dhgszfjzdggxdgxdgxfgxgxfdhdhcgdhchxcgcfftgcfgchcgghcgh</p ; </body ;
After running, click to get the scrolling up and down values.
The same method as the ScrollLeft ([Val]) usage
However, ScrollLeft ([Val]) is the obtained left and right values.
In addition to the old saying that many or most of the jquery is able to get the element value, but also can set the element value
If I use ScrollLeft ([Val]) to set the left and right values:
$("div.demo").scrollLeft(300);
Last say offset ([coordinates]) and position ()
I use an example to illustrate these two methods
Such as:
jquery code block
<script type="text/javascript" src="Jquery-1.8.2.min.js"> </script> <script type="Text/javascript">/*window*/Window.onload = function(){ varposition_$ = function(){$( function(){ varH2 = $ (' H2:last ') ;varPosition = H2.position (); $(' H3 '). Click ( function(){ varK = Position.left +' + '+ Position.top; Alert (k); }); }); }; position_$ ();/ * call * /( function(){ varH2 = $ (' H2:first ');varoffset = H2.offset ();varK = Offset.top +' + '+ Offset.left; $ (document). Click ( function(){Alert (k); }) }())/ * call * /};/*window*/ </script>HTML code block
<body> <h2></h2> <h2>你好啊！大自然 </h2> <h3>大自然：我很好！ </h3></body>
The returned result is:
When you click H3 ==>>8+52.916628247070314
When you click H3 or anywhere (click H3 the second one is the data we want)
==>>19.916671752929688+8
So we know how to use it.
(Big God do not spray Ah!) ）
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
Jquery-get-data (Width,height,position, (top,left), scrolltop,scrollleft) get data
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
