Изучение точной информации стиля элемента

Question

Я столкнулся с ситуацией, когда стало желательным, чтобы определить, имеет ли какой-то элемент нижнюю границу, используя Javascript.

Я думал, что это будет так же просто, как использовать getComputedStyle на элементе и искать «borderBottom» в результирующем объекте таблицы стилей.

Ну, похоже, это немного сложнее, если вам нужна совместимость с кросс-браузером. Я не говорю о поддержке таких древних вещей, как IE 6, 7 или даже 8 (у которых даже нет getComputedStyle). Я говорю о поддержке современных современных браузеров.

И кажется, что разные браузеры делают разные вещи в этом отношении.

Давайте очень простой таблицы стилей:

.foo, 
.bar { 
    border: 3px solid black; 
} 

.foo { 
    border-top: 0; 
} 

Предположим, что я хочу, чтобы получить вычисленную «border-bottom» значение здесь. Даже если фактическое свойство border-bottom не установлено, оно будет вычисляться через свойство border.

Так, на Chrome версии 37 (не последняя версия, но довольно «современный»), если я позвоню getComputedStyle на какой-то элемент, который использует класс bar, я получаю: 3px solid rgb(0, 0, 0), как и ожидалось.

Тем не менее, на Firefox (версия 28 - опять же не последняя версия, но все еще довольно «современная»). Я просто получаю пустую строку для стиля "borderBottom".

Итак, я написал небольшой скрипт для перебора вычисленного стилей и посмотреть, что Chrome и Firefox на самом деле производит:

var style = getComputedStyle(document.getElementById("example")); 
for (var key in style) console.log("STYLE: " + key + " " + style[key]); 

Оба браузера вывода ОГРОМНЫЙ список вычисленных стилей. Разумеется, с Chrome я вижу:

STYLE: borderBottom 3px solid rgb(0, 0, 0) 

Но Mozilla не предоставляет ничего подобного. Это обеспечивает сочетание правил стиля, наряду с машинным кодом внутренних функций, таких как:

"STYLE: item function item() { 
    [native code] 
}" 

Я сбрасывали выход для обоих браузеров на общественном jsfiddle (не означало быть выполнен, это просто открытым текстом выход я бросил туда):

The output for Firefox
The output for Chrome

Как вы можете видеть, они довольно разные.

And here's a fiddle показывает фактический код, я использовал для создания этих списков: (. Обратите внимание, что вывод отображается в консоли браузера, в большинстве браузеров нажмите кнопку F12 для просмотра консоли разработчика)

Итак, есть ли известная стратегия кросс-браузера для этого?Как найти вычисленный стиль для определенного свойства (например, borderBottom) таким образом, который работает во всех современных браузерах? Является ли это стандартом W3C?

Или это нечто слишком запутанное, чтобы пытаться обойтись без библиотеки?

Answer 1

Возможно, проблема заключается в том, что border является сокращенным свойством border-width, border-style, border-color. И border-width является сокращенным из border-*-width и т.д.

Затем, установив border наборы border-bottom-* свойства, но не border-bottom. Таким образом, вы получаете пустую строку в Firefox.

Однако, следующие будут работать:

getComputedStyle(element).borderBottomWidth