Как получить ширину в процентах в jQuery

В рамках разработки одно из сайтов в котором использовались проценты при указании ширины блоков столкнулся с, казалось бы, элементарной, проблемой. Возникла необходимость получить ширину блока в процентах. Каково же было мое удивление, что jQuery метод .width() этого не умеет.

Итак, у нас существует два блока с id left и id right, шириной 20% и 80%. Возникла необходимость получить ширину блока right. Пробуем получить ширину самыми простыми решениями:

$('#right').width() #выдаст 868
$('#right').css('width') #выдаст 868px

Как мы видим оба варианта в лоб выдают размер не в процентах, как это задано в стилях, а в процентах. Изучение официального мануала показало, что входных аргументов метод .width() не имеет, а следовательно его поведение строго определено. Придется воспользоваться знаниями jQuery и DOM модели.

Чтобы получить процентное значение надо сравнить текущую ширину объекта с шириной родительского объекта. Так как возвращаемые значения могут получать тип float, приводим общее значение к числу без плавающей точки.

<script type="text/javascript">
($('#right').width() / $('#right').parent().width() * 100).toFixed()+'%';
</script>

Надеюсь данное решение будет полезно. Кстати месяца два назад рассматривался похожий вопрос только о переводе значения с единицами измерения в число.