Скажімо, правило таке:

.largeField {
    width: 65%;
}

Чи є спосіб якось повернути '65% ', а не значення пікселя?

Дякую.

EDIT: На жаль, використання методів 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). :)

Спираючись на чудове та дивовижне рішення timofey, ось чиста реалізація 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>