Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Example introduction to the difference between height innerHeight outerHeight in jQuery_jquery

Example introduction to the difference between height innerHeight outerHeight in jQuery_jquery

WBOY
Release： 2016-05-16 16:44:28
Original
946 people have browsed it

Under standard browsers:

height: height

innerHeight: height + padding
outerHeight: height + padding + border, when the parameter is true: height + padding + border + margin

html code:

Copy code The code is as follows:

jjjjj


js code:
Copy code The code is as follows:

alert($(" #test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert ($("#test").outerHeight(true));

Results:
Results in ie: 17px, 37px, 41px, 61px
Results in ff : 20px, 40px, 44px, 64px

html code:
Copy code The code is as follows:

jjjjj< ;/div>

js code:
Copy code The code is as follows:

alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test"). outerHeight());
alert($("#test").outerHeight(true));
[html]
Results:
Results in ie: 17px, 37px, 41px, 61px
Result in ff: 41px, 61px, 65px, 85px

html code:
[code]
jjjjj


js code:
Copy code The code is as follows:

alert($("#test").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($("#test").outerHeight( true));

Results:
Results in ie: 18px, 38px, 42px, 62px
Results in ff: 42px, 62px, 66px, 86px

html code:
Copy code The code is as follows:

jjjjj


js code:
Copy code The code is as follows:

alert($("#test ").height());
alert($("#test").innerHeight());
alert($("#test").outerHeight());
alert($ ("#test").outerHeight(true));

Results:
Results in ie: 36px, 56px, 60px, 80px
Results in ff: 60px , 80px, 84px, 104px

Conclusion: In IE, height includes border and padding and the minimum value of height is 17px. In the same way, width can be obtained, but its minimum value is 15px.
Related labels：
height
source：php.cn
Previous article：JS implements simple top timing closing layer effect_javascript skills Next article：javascript Find error methods and organize them_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Is there a way to force the text in the flexbox to be vertically centered, no matter what other CSS code we have? I have the following CSS code that is part of a larger CSS code used in a website I'm deve...
From 2024-04-06 20:41:51
0
1
518
How to solve the mysterious white space at the bottom of the page in CSS I'm trying to build a simple webpage using Bootstrap and D3, but I don't know how to get r...
From 2024-04-06 20:22:15
0
1
454
Show hidden side panels: checked I would like to have a navigation menu in the side panel with the ability to switch to vie...
From 2024-04-06 15:49:33
0
1
319
JavaScript hover events on vendor-specific pseudo-elements I have the following htmlinput tag. $("input[type='range']::-webkit-slider-thumb"...
From 2024-04-06 15:35:24
0
1
274
Electron gets AppData on preload How to get the preloaded AppData directory? Background.js[...]asyncfunctioncreateWindow(){...
From 2024-04-06 11:05:31
0
1
417
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template