Можно ли использовать jQuery для получения ширины элемента в процентах или пикселях в зависимости от того, что разработчик указал с помощью CSS?

Я бы сказал, что лучший способ - вычислить его самостоятельно:

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;

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

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

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

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

Я думаю, вы можете напрямую использовать доступ к объекту таблицы стилей («стиль»). Даже тогда YMMV через браузер. например elm.style.width.

Редактировать комментарий Питера:: Я не ищу "получить %". По вопросу:

Мне нужно иметь возможность определить ширину элемента, который указывает пользователь... [есть ли способ] вывести ширину элемента в пикселях или% в зависимости от того, что разработчик дал ему с помощью CSS?

Таким образом, я предоставил альтернативу для получения «сырого» значения CSS. Похоже, это работает на FF3.6. YMMV в другом месте (ответ netadictos может быть более портативным/универсальным, я не знаю). Опять же, он не стремится получить %.

Способ сделать это задокументирован в этом вопросе stackoverflow.

Как вы читаете значения правил CSS с помощью JavaScript?

Единственное, что вам нужно знать, это то, в какой таблице стилей находится класс или цикл по всем таблицам стилей. Следующая функция дает вам все функции класса, было бы легко сделать регулярное выражение для извлечения функции, которую вы ищете.

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x<classes.length;x++) {

        if(classes[x].selectorText==className) {
                (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyle('.test');

Для своих целей я экстраполировал ответ MДΓΓ БДLL.

Имейте в виду, я работаю только с целыми процентами.

    var getPercent = function(elem){
        var elemName = elem.attr("id");
        var width = elem.width();
        var parentWidth = elem.offsetParent().width();
        var percent = Math.round(100*width/parentWidth);
        console.log(elemName+"'s width = "+percent+"%");
    }

    getPercent($('#folders'));
    getPercent($('#media'));
    getPercent($('#player'));

Если вы хотите переназначить исходный процент элементов на новый процент, рекомендуется определить это значение в CSS и каким-либо образом изменить идентификатор элемента (класс, идентификатор и т. д.), чтобы отразить новое определение CSS. Это не всегда применимо, если новая процентная переменная должна быть переменной.

.myClass{
    width:50%;
}

.myNewClass{
    width:35%;
}

Добавление удаления с помощью этого (или другого) метода:

$('.myClass').removeClass('myClass').addClass('myNewClass');

просто чтобы сделать его более jqueryish

Добавь это

$.fn.percWidth = function(){
  return this.outerWidth() / this.parent().outerWidth() * 100;
}

а затем использовать

$(selector).percWidth()

это вернет процентное значение без знака%, поэтому вы можете использовать его в расчетах

Если он установлен с использованием тега стиля, вы можете просто использовать .prop()
например. $('.selector').prop('style').width.replace('%', '')

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

После нескольких быстрых попыток вот что у меня получилось:

    $($($(table).find('tr')[0]).find('td')).each(function (i, e) {
        var proptW = $(e).prop("style").width;
        console.log(proptW);
    });

Итак, я думаю, что это самый близкий способ использования jQuery для получения значения ширины элемента на основе того, что разработчик указал в css.

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

Мы не можем получить указанное разработчиком значение (DSV) напрямую с помощью метода jQuery, но после объединения со встроенным методом JavaScript это всего один шаг от получения DSV.

Поскольку DSV находится в Style, а Style является свойством элемента, мы можем использовать метод jQuery: prop(), чтобы получить его. Этот метод возвращает объект стиля (скажем, sty), так что мы можем вызвать sty.width для прямого получения DSV.

Это не чистый способ jQuery, но он достаточно прост и работает для меня.