Проблема Firefox с currentStyle vs getComputedStyle

Я пытаюсь получить ширину элемента в соответствии с его правилами CSS. Проблема в том, что "getComputedStyle" возвращает значение пикселя вместо "auto" для элемента без установленного значения ширины CSS. В Opera "elem.currentStyle['width']" возвращает "auto", но в Firefox он должен использовать "getComputedStyle", которое возвращает что-то вроде "1149px".

Для меня жизненно важно знать, каково настоящее правило CSS. Есть ли какой-то способ сделать это, кроме как getComputedStyle? Firefox MDN ясно дает понять, что "getComputedStyle" - не тот путь, но я не могу найти документацию для Firefox, эквивалентную "currentStyle".

Если вы хотите знать, моя конечная цель - найти самый большой элемент статической ширины на странице. Если я не могу прочитать значения таблиц стилей - только визуализированные / вычисленные значения - тогда как мне этого добиться?

Источник

3 ответа

Решение

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

Что вам, вероятно, нужно сделать, это просмотреть таблицы стилей. По линии:

for (var i = 0; i < document.styleSheets.length; i++)
{
  var styleSheet = document.styleSheets[i];
  for (var j = 0; j < styleSheet.cssRules.length; j++)
  {
    var rule = styleSheet.cssRules[j];
    if (rule.type == 1)  // STYLE_RULE
    {
      // Do something with rule.style.width
    }
  }
}

Если вам нужно найти элементы, соответствующие этому правилу, вы можете использовать document.querySelectorAll() с rule.selectorText, Оставшаяся проблема заключается в том, что несколько правил стиля могут применяться к одному и тому же элементу, и необходимо рассчитать специфику правила. Не уверен, насколько это проблема для вас, однако.

Дополнительная документация:

Источник

К сожалению, насколько я знаю, нет реалистичного способа достичь этого.

Изменить: приведенный выше ответ, проходящий по таблицам стилей, является лучшим выбором. Первоначально я думал о доступе к таблицам стилей, но не думал об использовании querySelectorAll. Снимаю шляпу перед Владимиром для гениального решения.

-

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

div {
    width: 35px;
    min-width: 1px; /* the flag */
    }

Итак, при поиске элементов с указанной шириной, вы можете сначала искать [ComputedStyle].minWidth == '1px'.

Довольно хакерское решение, но оно выполнит свою работу.

Вы также можете установить случайное имя класса для элементов с заданной шириной, тогда все, что вам нужно будет сделать, это запросить элементы с этим именем класса. Хотя это не очень динамичное решение.

Источник

Если вы просто хотите получить размер элемента, почему бы не использовать

element.clientWidth или же element.clientHeight

getcomputestyle не предназначен для получения ширины или высоты элемента

Источник
Другие вопросы по тегам