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

Question

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

Есть ли способ, чтобы jQuery выводил ширину элемента в px или% в зависимости от того, что разработчик дал ему с помощью CSS?

Answer 1

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

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

Answer 2

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

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

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

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

Answer 3

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

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

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

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

Answer 4

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

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');

Answer 5

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

.myClass{
    width:50%;
}

.myNewClass{
    width:35%;
}

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

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

Answer 6

Для моих целей я экстраполировал ответ МДГ БДЛЛ.

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

    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'));

Answer 7

Если установлено с помощью тега style, вы можете просто использовать .prop ()
например, $ ('. Selector'). Prop ('style'). Width.replace ('%', '')

Answer 8

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

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

    $($($(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, но он достаточно прост и работает для меня.

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

Приветствия

Answer 9

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

добавить это

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

и затем используйте

$(selector).percWidth()

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