Вы можете использовать атрибуты data-*, которые позволяют нам хранить дополнительную информацию о стандартных элементах semanti c HTML без других хаков, таких как нестандартные атрибуты или дополнительные свойства в DOM.
Синтаксис прост. Любой атрибут любого элемента, имя атрибута которого начинается с data-, является атрибутом данных. Допустим, у вас есть div, и вы хотите хранить некоторую дополнительную информацию, которая не имеет визуального представления. Просто используйте data атрибуты для этого, например:
<div id="custom" data-cutomsAttr="abc">
</div>
Затем в своем коде вы можете получить доступ к его новому data-cutomsAttr значению атрибута dataset, например:
const custom = document.querySelector('#custom');
console.log( custom.dataset.cutomsattr )
<div id="custom" data-cutomsAttr="abc">
</div>
Примечание: Этот атрибут camelCase cutomsAttr преобразуется в нижний регистр cutomsattr.
Сейчас Чтобы получить что-то солнечное для " Пользовательский атрибут, содержащий модификаторы ", вы можете просто установить несколько атрибутов data для таких параметров, как:
<div id="custom" data-cutomsAttr="abc" data-option1="true" data-option2="false">
</div>
, а затем получить к ним доступ, например:
const custom = document.querySelector('#custom');
const { cutomsattr, option1, option2 } = custom.dataset
console.log( cutomsattr, option1, option2 )
<div id="custom" data-cutomsAttr="abc" data-option1="true" data-option2="false">
</div>
В случае, если вы не хотите устанавливать data-option1 & data-option2 все деления и делать их необязательными со значением по умолчанию false, вы также можете сделать это, как:
const custom = document.querySelector('#custom');
const { cutomsattr, option1 = false, option2 = false } = custom.dataset
console.log( cutomsattr, option1, option2 )
<div id="custom" data-cutomsAttr="abc" data-option1="true">
</div>