Проблема Firefox с currentStyle vs getComputedStyle - PullRequest
Новая
       26

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

5 голосов
/ 29 августа 2011

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

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

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

Ответы [ 3 ]

4 голосов
/ 29 августа 2011

Если вы начинаете с элемента, нет способа узнать, какие правила таблицы стилей применены к нему.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.Оставшаяся проблема заключается в том, что несколько правил стиля могут применяться к одному и тому же элементу, и необходимо рассчитать специфику правила.Однако не уверен, насколько это проблема для вас.

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

1 голос
/ 29 августа 2011

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

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

-

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

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

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

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

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

0 голосов
/ 29 августа 2011

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

element.clientWidth или element.clientHeight

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

...