Как получить доступ и визуализировать атрибуты данных с помощью CSS и JavaScript

Атрибуты данных дают нам возможность встраивать пользовательские атрибуты данных в HTML. Согласно MDN, атрибуты данных позволяют нам хранить дополнительную информацию о стандартных семантических элементах HTML без других хаков, таких как нестандартные атрибуты или дополнительные свойства в DOM.

Прелесть этих атрибутов данных в том, что к ним можно получить доступ в CSS и JavaScript. Давайте сначала посмотрим на пример того, как это работает с CSS:

<b data-content="John Doe"></b>
<style type="text/css">
  b::after{
       content: attr(data-content);
  }
</style>

Из приведенного выше блока кода CSS видно, что селектор псевдокласса ::after использует свойство content для отображения атрибута данных. В этом контексте он отображает Джон Доу в качестве содержимого данных.

Кроме того, JavaScript можно использовать для доступа и отображения атрибутов данных на веб-странице. Давайте посмотрим на пример ниже:

var name = b.document.getElementById("name");

console.log(name.dataset.parent);

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

Известные ссылки