jQuery.css(): Firefox не возвращает автоматические значения

Я устанавливаю верхние или нижние и левые или правые значения для нескольких элементов. Когда я пытаюсь получить доступ к этим значениям с помощью Firefox (16.0.2), я получаю неправильное значение для top (конкретное значение вместо auto)

CSS

div {
    bottom:200px;
    left:0px;
    top:auto;
    right:auto;
}

JS

$(function(){
    var top = $('div').css('top');
    alert(top);
});​

Вы можете попробовать это здесь: http://jsfiddle.net/UEyxD/2/ (хорошо работает в Chrome/Safari)

Любые идеи, как предотвратить это? я хочу получить


jquery css firefox
person Slevin    schedule 19.11.2012    source источник
comment
чего ты добиваешься?   -  person Kyle    schedule 19.11.2012
comment
Единственный способ получить исходное значение в Firefox — это вместо этого использовать встроенный CSS для элемента, иначе будет возвращено вычисленное значение.   -  person Adam    schedule 19.11.2012
comment
@Slevin, посмотри на мой ответ   -  person Jose Rui Santos    schedule 23.12.2013

Ответы (4)


arrow_upward
4
arrow_downward

Это зависит от браузера и от того, как он интерпретирует стили, это несколько вне вашего контроля. Однако с помощью определенных обходных путей CSS и jQuery вы сможете обойти это. Например, если вам не нужно, чтобы элемент располагался абсолютно, вы можете удалить его или изменить на position:static;.

Взгляните на этот вопрос.

Что касается того, почему Chrome и IE возвращают разные значения: .css() предоставляет унифицированный шлюз для вычисляемых функций стиля браузеров, но он не унифицирует способ, которым браузеры фактически вычисляют стиль. Браузеры нередко решают такие крайние случаи по-разному.

person Ben Carey    schedule 19.11.2012
comment
Эту проблему можно решить, если прочитать свойство css, пока элемент скрыт. Таким образом, браузер не вернет вычисленное значение. Смотрите мой ответ. - person Jose Rui Santos; 23.12.2013

arrow_upward
8
arrow_downward

У меня тоже была эта неприятная проблема.

Некоторые браузеры возвращают вычисленную позицию, если элемент виден в данный момент. Хитрость заключается в том, чтобы скрыть его, прочитать css, а затем снова сделать видимым (если он еще не был скрыт).

Я написал удобную функцию, которая позаботится об этом и вернет auto в Firefox.

jsFiddle

var getCss = function($elem, prop) {
        var wasVisible = $elem.css('display') !== 'none';
        try {
            return $elem.hide().css(prop);
        } finally {
            if (wasVisible) $elem.show();
        }
    };


alert( getCss($('div'), 'top') );

finally просто возвращает видимость элементу непосредственно перед возвратом функции.

Вы должны использовать эту функцию только в тех случаях, когда вы ожидаете возврата auto.

person Jose Rui Santos    schedule 22.12.2013
comment
Хотя мне не нравится использование try/finally таким образом, на самом деле справочная информация помогла мне решить проблему. - person Chris; 18.11.2014
comment
Спасибо, я этого не знал. Как будто у моей машины нет дверей, пока она видна, а когда она становится невидимой, двери появляются как картошка. - person kappaallday; 21.01.2015

arrow_upward
6
arrow_downward

Вы можете получить целочисленное значение вершины, когда вы устанавливаете «авто» с кодом ниже:

$(function(){
    var top = $('div').offset().top;
    alert(top);
});​
  • offset Возвращает значение положения, когда вы устанавливаете значение Auto
person Ahmad Ronagh    schedule 23.03.2013

arrow_upward
0
arrow_downward

Просто удалите стиль position, и вы получите auto вместо вычисляемого значения.

div {
    top: auto;
    bottom:20px;    
    right:20px;
    left:0px;
}

вы можете протестировать его здесь.

person Muhammad Bilal    schedule 19.11.2012
comment
Может быть, ему нужно, чтобы div был расположен! - person Ben Carey; 19.11.2012