Получение процентных значений CSS (в Firefox)

Question

У меня проблема с получением точного значения свойства css (в «%») в firefox.

Предположим, у нас есть очень простая разметка:

<div id="box">box</div>

и это css:

#box{
    width:200px;
    height:200px;
    left:10%;
    position:absolute;
    background:red;
}

и Я хотел бы получить левую позицию (в '%') от js

Это очень легко с mootools (демо -> http://jsfiddle.net/steweb/AWdzB/):

var left = $('box').getStyle('left');

или jQuery (демо -> http://jsfiddle.net/steweb/RaVyU/):

var left = $('#box').css('left');

или просто js (демо -> http://jsfiddle.net/steweb/tUAKA/):

function getStyle(el,styleProp){ //from ppk's quirksmode
    var x = document.getElementById(el);
    if (x.currentStyle)
        var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}

var left = getStyle('box','left');

Но если вы попробуете это на firefox (8.0.1), вы увидите, чторезультат не правильный (должен быть 10%, но это 91px). Вопросы: есть ли ошибка в этой новой версии Firefox? Кто-нибудь знает, если это известная ошибка? Я что-то не так делаю?

Спасибо:)

Обновление : я пробовал также на старых выпусках Firefox, и это не правильно (он всегда возвращает значение px) .. для полноты, он работает правильно в IE

Answer 1

Это задокументировано :

Используемое значение любого свойства CSS является окончательным значением этого свойства после выполнения всех вычислений. Используемые значения можно получить, вызвав window.getComputedStyle. Размеры (например, ширина, высота строки) указаны в пикселях ... и т. Д.

Кажется, что нет никакого способа получить доступ к "указанным" значениям css для данного элемента, если вы не знаете точно, какое правило css применяется, и проанализируйте это правило, используя document.stylesheets или подобный интерфейс.

Answer 2

Правильный ответ - комментарий об ошибке, которую я подал на bugzilla

https://bugzilla.mozilla.org/show_bug.cgi?id=707691#c7

Чтобы получить правильное значение% (также и в Firefox), элемент (или один из его родителей) display должен быть установлен в none

Тест: http://jsfiddle.net/4RKsM/

Непонятная вещь: почему в одном и том же браузере / версии (см. Firefox 7 для XP / Win7 или Opera 11.5 для Mac OSX / Ubuntu), но на разных ОС поведение отличается?

Кстати, spec @ thg435, опубликованный (и сообщенный на mdn), все еще находится в движении.

Answer 3

Как я знаю, он никогда не показывал процент (я использую ff, opera и chrome).Так что я думаю, что это не только проблема Firefox.

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

parseInt($('#box').css('left'))/ $(window).width()*100;

Answer 4

в chrome это зависит от фиксированного значения позиции, и абсолютное значение всегда дает px, в то время как другие значения выводят то, что было введено, например, если вы дали ему значение 10%, то это вывело бы 10%, а если вы введете 100px, то оновыдаст 100px