Хранение данных в 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. Спасибо коллеге Егору Дыдыкину за указание на этот метод.

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

Обо мне

Я живу в Берлине и работаю фронтенд-разработчиком в Хире, а в свободное время фотографирую, пишу, глажу своих собак и пью кофе.

Читайте обо мне на моём сайте и подпишитесь на мой блог о фотографии и твитер.