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

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 3

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

Изменить комментарий Peter:: Я не хочу "получать%". По вопросу:

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

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

Ответ 4

Способ сделать это задокументирован в этом вопросе 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');

Ответ 5

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

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

    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+" width = "+percent+"%");
    }

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

Ответ 6

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

.myClass{
    width:50%;
}

.myNewClass{
    width:35%;
}

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

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

Ответ 7

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

добавить это

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

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

$(selector).percWidth()

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

Ответ 8

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

Ответ 9

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

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

    $($($(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.width, чтобы получить DSV напрямую.

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

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

Приветствия,