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

$('.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().

посмотреть пример одну строчку.

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

Вы можете получить доступ к

поздно, но для новых пользователей, попробуйте это Если стиль 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%'). Если бы вы использовали ответ Adams напрямую, это не сработало (я получил что-то вроде 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. в include, который скрипт на стороне сервера затем помещает в голову

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

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

ie.

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

Смотрите также: http://api.jquery.com/width/ http://api.jquery.com/css/

я переписываю комментарий user1491819 в качестве ответа и добавляю небольшое улучшение (я не могу комментировать из-за низкой репутации).

user1491819 создал эту очень полезную функцию:

function getCssWidth(childSelector) {
  return jQuery(childSelector).parent().clone().hide().find(childSelector).width();
}

но эта функция возвращает количество пикселей или процент без единиц, так что вам нужно угадать, какой из них. Для того, чтобы не угадать, вы можете использовать css('width'), и он также вернет единицу. Поэтому функция для получения значения с единицами должна быть:

function getCssWidth(childSelector) {
  return jQuery(childSelector).parent().clone().hide().find(childSelector).css('width');
}

в 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>