Extra Attributes

Add new attributes to elements in your HTML

[![Version][npm-version-shield]][npm]
[![Build][github-ci-shield]][github-ci]
[![License][license-shield]][license]
[![Downloads][npm-stats-shield]][npm-stats]

tags:

`js
const attributes = {
div: {
id: 'new'
},
}
`

#### Select by class

Add editable="true" to all elements with a test class:

`js
const attributes = {
'.test': {
'editable': true
},
}
`

#### Select by id

Add class="new" to any element with id="test":

`js
const attributes = {
'#test': {
class: 'new'
},
}
`

If the element already has a class attribute, the value will be appended:

`html



`

... will result in:

`html



`

#### Select by attribute

Adds aria-roledescription="slide" to all elements with a role attribute:

`js
const attributes = {
'[role]': {
'aria-roledescription': 'slide'
},
}
`

#### Select multiple tags

Add multiple attributes to multiple elements in one go:

`js
const attributes = {
'div, p': {
class: 'test',
},
'div[role=alert], section.alert': {
class: 'alert'
},
}
`

$3

Type: Boolean\
Default: false

By default, the plugin will not overwrite existing attribute values.

Set this option to true to enable attribute value overwriting:

`js
posthtml([
addAttributes({
attributes: {
div: {
id: 'new'
}
},
overwrite: true
})
])
.process('

')
.then(result => console.log(result.html))

//

Test

``

[npm]: https://www.npmjs.com/package/posthtml-extra-attributes
[npm-version-shield]: https://img.shields.io/npm/v/posthtml-extra-attributes.svg
[npm-stats]: http://npm-stat.com/charts.html?package=posthtml-extra-attributes
[npm-stats-shield]: https://img.shields.io/npm/dt/posthtml-extra-attributes.svg
[github-ci]: https://github.com/posthtml/posthtml-extra-attributes/actions
[github-ci-shield]: https://github.com/posthtml/posthtml-extra-attributes/actions/workflows/nodejs.yml/badge.svg
[license]: ./LICENSE
[license-shield]: https://img.shields.io/npm/l/posthtml-extra-attributes.svg