Допустим, правило таково:

.largeField {
    width: 65%;
}

Есть ли способ как-то вернуть 65%, а не значение в пикселях?

Спасибо.

РЕДАКТИРОВАТЬ: К сожалению, использование методов DOM в моем случае ненадежно, так как у меня есть таблица стилей, которая импортирует другие таблицы стилей, и в результате параметр cssRules заканчивается либо нулевым, либо неопределенным значением.

Такой подход, однако, будет работать в самых простых случаях (один таблицу стилей, несколько отдельных декларации стилей внутри головки тега документа).

Боюсь, встроенного способа нет. Вы можете сделать что-то вроде этого:

var width = ( 100 * parseFloat($('.largeField').css('width')) / parseFloat($('.largeField').parent().css('width')) ) + '%';

Самый простой способ

$('.largeField')[0].style.width

// >>> "65%"

Это определенно возможно!

Сначала вы должны скрыть () родительский элемент. Это предотвратит вычисление JavaScript пикселей для дочернего элемента.

$('.parent').hide();
var width = $('.child').width();
$('.parent').show();
alert(width);

Смотрите мой пример .

А теперь ... Интересно, обнаружил ли я этот хак первым :)

Обновить:

Один лайнер

element.clone().appendTo('body').wrap('<div style="display: none"></div>').css('width');

Он оставит скрытый элемент перед </body>тегом, который вы можете захотеть.remove() .

См. Пример однострочного .

Я открыт для лучших идей!

Вы могли получить доступ к document.styleSheetsобъекту:

<style type="text/css">
    .largeField {
        width: 65%;
    }
</style>
<script type="text/javascript">
    var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var i=0; i < rules.length; i++) {
        var rule = rules[i];
        if (rule.selectorText.toLowerCase() == ".largefield") {
            alert(rule.style.getPropertyValue("width"));
        }
    }
</script>

Поздно, но для новых пользователей попробуйте это, если стиль css содержит процент :

$element.prop('style')['width'];

Плагин jQuery, основанный на ответе Адамса:

(function ($) {

    $.fn.getWidthInPercent = function () {
        var width = parseFloat($(this).css('width'))/parseFloat($(this).parent().css('width'));
        return Math.round(100*width)+'%';
    };

})(jQuery);

$('body').html($('.largeField').getWidthInPercent());​​​​​

Вернет 65%. Для лучшей работы возвращает только округленные числа, если вам нравится if (width == '65%'). Если бы вы использовали ответ Адамса напрямую, это не сработало (у меня что-то вроде 64.93288590604027). :)

Основываясь на отличном и удивительном решении Тимофея, вот чистая реализация Javascript:

function cssDimensions(element)
  var cn = element.cloneNode();
  var div = document.createElement('div');
  div.appendChild(cn);
  div.style.display = 'none';
  document.body.appendChild(div);
  var cs = window.getComputedStyle
    ? getComputedStyle(cn, null)
    : cn.currentStyle;
  var ret = { width: cs.width, height: cs.height };
  document.body.removeChild(div);
  return ret;
}

Надеюсь, это кому-то поможет.

У меня аналогичная проблема с получением значений глобальной таблицы стилей в jQuery , в конце концов я пришел к тому же решению, что и выше .

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

Вы можете поместить стили, к которым вам нужно получить доступ с помощью jQuery, в:

1. непосредственно глава документа
2. во включении, который скрипт на стороне сервера затем помещает в голову

Тогда должно быть возможно (хотя и не обязательно просто) написать функцию js, которая анализирует все в тегах стиля в заголовке документа и возвращает нужное значение.

Вы можете использовать функцию css (width), чтобы вернуть текущую ширину элемента.

т.е.

var myWidth = $("#myElement").css("width");

См. Также: http://api.jquery.com/width/ http://api.jquery.com/css/

В jQuery ничего нет, и даже в javascript нет ничего простого. Взяв ответ Тимофея и запустив его, я создал эту функцию, которая работает для получения любых свойств, которые вы хотите:

// gets the style property as rendered via any means (style sheets, inline, etc) but does *not* compute values
// domNode - the node to get properties for 
// properties - Can be a single property to fetch or an array of properties to fetch
function getFinalStyle(domNode, properties) {
    if(!(properties instanceof Array)) properties = [properties]

    var parent = domNode.parentNode
    if(parent) {
        var originalDisplay = parent.style.display
        parent.style.display = 'none'
    }
    var computedStyles = getComputedStyle(domNode)

    var result = {}
    properties.forEach(function(prop) {
        result[prop] = computedStyles[prop]
    })

    if(parent) {
        parent.style.display = originalDisplay
    }

    return result
}

Преобразование пикселей в проценты с помощью перекрестного умножения .

Настройка формулы:

1.) (element_width_pixels / parent_width_pixels) = (element_width_percentage / 100)

2.) element_width_percentage = (100 * element_width_pixels) / parent_width_pixels

Фактический код:

<script>

   var $width_percentage = (100 * $("#child").width()) / $("#parent").width();

</script>