可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效,请关闭广告屏蔽插件后再试):
问题:
I have used outerHeight
and outerWidth
on many places. Now, after jQuery 1.8 was released I have met a lot of issues caused by object return instead of its size.
For example:
$('#stackoverflowdiv').Height() // returns 100 px
$('#stackoverflowdiv').outerHeight() // returns "stackoverflowdiv" div
The only thing that I have found to fix this was to use "true/false" in the function as follows but the I get the same results as the standard width()
and height()
functions:
$('#stackoverflowdiv').outerHeight(true) // returns 100 px
$('#stackoverflowdiv').outerHeight(false) // returns 100 px
Has anyone knew why this is not working any more or other way to get the height/width of element + its margins.
EDIT: I started to believe that this is caused because I am selecting elements in iframe using contents()
function. I will try to make a demo.
回答1:
This is actually a known jQuery bug that you can read about here.
I'm experiencing it with no parameter and the fix is setting the parameter (even though there's a default {false}), but I was able to break Barlas' fiddle by replacing the true parameter with 1 and false with 0. So don't do that if you are.
Do this:
alert(jQuery(this).outerHeight(false));
Don't do this:
alert(jQuery(this).outerHeight());
alert(jQuery(this).outerHeight(0));
回答2:
It only works if I do .outerHeight(1);
not .outerHeight(true);
回答3:
The best fix is to pass the Boolean parameter true
or false
when calling outerHeight
or outerWidth
But..
If by any chance you don't have access to files which calls outerHeight
or you don't want to edit all outerHeight
functions in your files, you can override the jQuery outerHeight
function like below to make it always pass the true
parameter
var oldOuterHeight = $.fn.outerHeight;
$.fn.outerHeight = function () {
return oldOuterHeight.apply(this, [true]);
};
回答4:
JQuery 1.8 height()
, innerHeight()
, outerHeight()
and outerHeight(true)
work as expected:
DEMO - Working height methods
The demo above is using a div:
<div id="myDiv">My Div</div>
With the following CSS:
div{
border: 1px solid blue;
padding: 5px;
margin: 10px;
}
Using this script:
var $div = $("#myDiv");
var height = $div.height();
var heightWithPadding = $div.innerHeight();
var heightWithPaddingAndBorder = $div.outerHeight();
var heightWithPaddingAndBorderAndMargin = $div.outerHeight(true);
var $result = $("#result");
$result.append("height: " + height);
$result.append("<br />height with padding: " + heightWithPadding);
$result.append("<br />height with padding and borders: " + heightWithPaddingAndBorder);
$result.append("<br />height with padding and borders and margin: " + heightWithPaddingAndBorderAndMargin);
Resulting in the following:
height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52
回答5:
It is working fine mate, i can't be sure without seeing your html and css but you can inspect this example and examine it is working fine on jQuery 1.8.0
Here is working jsFiddle.
jQuery:
console.log($('#stackoverflowdiv').outerHeight(false));//returns 110
console.log($('#stackoverflowdiv').outerHeight(true));//returns 130
css:
#stackoverflowdiv {
height:100px;
margin:10px 5px;
padding:5px;
border 2px solid #fff;
}
Are you sure that you forgot use a semicolon or define document.ready
? Or worse forgot to define margin
or border
?
回答6:
outerHeight
only returns an integer or null
according to the jQuery DOCs.
Returns the height of the element, including top and bottom padding,
border, and optionally margin, in pixels. If called on an empty set of
elements, returns undefined (null before jQuery 3.0).
There must be something else in your code futzing with your output and making you see the div element.