🚧elem.showDataAttr()

show element's "data-xxx" attribute compared with its `dataset` property.

🔰 JS ⟩ DOM ⟩ Types ⟩ Element ⟩

elem.showDataAttr()

// ⭐️ elem.showDataAttr('data-xxx')
//    show element's "data-xxx" attribute & property
Element.prototype.showDataAttr = function (dataAttr){
  const prop = dataAttr.toDatasetPropName();
  log(`${this.nodeName.toLowerCase()}.${prop} = '${this.dataset[prop]}'`);
  log(`${dataAttr}='${this.attr(dataAttr)}'`);
}

// sample result:
// -----------------------
// div.widgetName = 'menu'
// data-widget-name='menu'

⬆️ 需要

• String ⟩ .toDatasetPropName() - "data-xxx" attribute name to "dataset" property name.

• Element ⟩ .attr() - get element's attribute

💾 程式

• codepen ⟩ data attributes

👥 相關

• "data-xxx" Attributes

• CSS Properties