Хранение данных в CSS-файлах

Иногда бывает нужно хранить какие-то данные непосредственно в CSS-файле, и иметь к ним доступ из JavaScript. Самый простой и кроссбраузерный способ — использование свойств content и font-family с одинаковым значением (font-family нужен для ИЕ).

Где-нибудь на странице нужно создать служебный элемент:

<div id="pony"></div>

И применить к нему CSS:

#pony {
  display: none;
  content: 'Pink';
  font-family: 'Pink';
}

Теперь мы можем легко достать нашу строку:

function getCssString(elem) {
  var value = elem.css('content') || elem.css('font-family');
  return value && value.replace(/"/g, '');
}

alert(getCssString($('#pony')));

Можно посмотреть живой пример.

P. S. Спасибо коллеге Егору Дыдыкину за указание на этот метод.

Обсудить в твитереОтредактировать на Гитхабе