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

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

Есть ли способ, чтобы jQuery выводил ширину элемента в px или% в зависимости от того, что разработчик дал ему с помощью 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); 

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

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

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

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

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

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

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

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

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

Для моих целей я экстраполировал ответ 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+"'s width = "+percent+"%"); } getPercent($('#folders')); getPercent($('#media')); getPercent($('#player')); 

Если вы хотите переназначить процент исходных элементов на новый процент, рекомендуется определить это значение в CSS и каким-то образом изменить идентификатор элементов (class, идентификатор и т. Д.), Чтобы отразить новое определение 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 в стиле и стиле является свойством элемента, мы можем использовать метод jQuery: prop (), чтобы получить его. Этот метод возвращает объект стиля (например, стиль), так что мы можем вызвать sty.width, чтобы получить DSV напрямую.

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

Я надеюсь, что это помогает.

Ура,

  • CSS: 100% ширина или высота при сохранении пропорций?
  • Ширина столбца CView ListView Auto
  • Свойство CSS \ 9 в ширине
  • Как получить ширину строки в Libgdx?
  • IE 8: исправление фонового размера
  • Как получить размер NSString
  • Давайте будем гением компьютера.