JQuery 1.8 внешний Высота/ширина не работает

Я использовал outerHeight и outerWidth во многих местах. Теперь, после выхода jQuery 1.8, я встретил много проблем, вызванных возвратом объекта, а не его размером.

Например:

$('#stackoverflowdiv').Height()      // returns 100 px
$('#stackoverflowdiv').outerHeight() // returns "stackoverflowdiv" div

Единственное, что я нашел, чтобы исправить это, это использовать "true/false" в функции следующим образом, но я получаю те же результаты, что и стандартные функции width() и height():

$('#stackoverflowdiv').outerHeight(true)  //  returns 100 px
$('#stackoverflowdiv').outerHeight(false) //  returns 100 px

Кто-нибудь знал, почему это не работает больше или иначе, чтобы получить высоту/ширину элемента + его полей.

EDIT: Я начал полагать, что это вызвано тем, что я выбираю элементы iframe с помощью функции contents(). Я попытаюсь сделать демо.

Ответы

Ответ 1

На самом деле это известная ошибка jQuery, которую вы можете прочитать здесь здесь.

Я испытываю это без параметра, и исправление устанавливает параметр (хотя есть значение по умолчанию {false}), но я смог сломать скрипку Barlas, заменив истинный параметр 1 и false на 0. Поэтому не делайте этого, если вы.

Сделайте это:

alert(jQuery(this).outerHeight(false));

Не делайте этого:

alert(jQuery(this).outerHeight());
alert(jQuery(this).outerHeight(0));

Ответ 2

Это работает, только если я .outerHeight(1); не .outerHeight(true);

Ответ 3

JQuery 1.8 height() innerHeight() и outerHeight() и outerHeight(true) работают как ожидалось:

DEMO - Методы рабочей высоты

В приведенной выше демонстрации используется div:

<div id="myDiv">My Div</div>

Со следующим CSS:

div{
    border: 1px solid blue;
    padding: 5px;
    margin: 10px;
}

Используя этот 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);

Результат:

height: 20
height with padding: 30
height with padding and borders: 32
height with padding and borders and margin: 52

Ответ 4

Лучшее решение - передать логический параметр true или false при вызове outerHeight или outerWidth

Но..

Если у вас нет доступа к файлам, вызывающим outerHeight, или вы не хотите редактировать все функции outerHeight в своих файлах, вы можете переопределить функцию jQuery outerHeight, как показано ниже, чтобы сделать он всегда передает параметр true

var oldOuterHeight =  $.fn.outerHeight;

$.fn.outerHeight = function () { 
    return oldOuterHeight.apply(this, [true]);
};

Ответ 5

Он работает отлично, я не могу быть уверен, не видя ваши html и css, но вы можете проверить этот пример и изучить его отлично работает на jQuery 1.8.0

Здесь работает 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;
}

Вы уверены, что забыли использовать точку с запятой или определить document.ready? Или хуже забыл определить margin или border?

Ответ 6

outerHeight возвращает целое число или null в соответствии с jQuery DOC.

В вашем программном обеспечении должно быть что-то еще, и вы увидите элемент div.