You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

162 lines
6.0 KiB

4 years ago
  1. # bianco.attr
  2. [![Build Status][travis-image]][travis-url]
  3. [![NPM version][npm-version-image]][npm-url]
  4. [![NPM downloads][npm-downloads-image]][npm-url]
  5. [![MIT License][license-image]][license-url]
  6. ## Usage
  7. ```js
  8. import { set, get, has, remove } from 'bianco.attr'
  9. // set an attribute on a node
  10. const img = document.createElement('img')
  11. set(img, 'width', 100)
  12. get(img, 'width') // => '100'
  13. has(img, 'width') // => true
  14. remove(img, 'width')
  15. get(img, 'width') // => null
  16. ```
  17. [travis-image]: https://img.shields.io/travis/biancojs/attr.svg?style=flat-square
  18. [travis-url]: https://travis-ci.org/biancojs/attr
  19. [license-image]: http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
  20. [license-url]: LICENSE.txt
  21. [npm-version-image]: http://img.shields.io/npm/v/bianco.attr.svg?style=flat-square
  22. [npm-downloads-image]: http://img.shields.io/npm/dm/bianco.attr.svg?style=flat-square
  23. [npm-url]: https://npmjs.org/package/bianco.attr
  24. ## API
  25. <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
  26. #### Table of Contents
  27. - [set](#set)
  28. - [Parameters](#parameters)
  29. - [Examples](#examples)
  30. - [get](#get)
  31. - [Parameters](#parameters-1)
  32. - [Examples](#examples-1)
  33. - [remove](#remove)
  34. - [Parameters](#parameters-2)
  35. - [Examples](#examples-2)
  36. - [has](#has)
  37. - [Parameters](#parameters-3)
  38. - [Examples](#examples-3)
  39. ### set
  40. Set any attribute on a single or a list of DOM nodes
  41. #### Parameters
  42. - `els` **([HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [NodeList](https://developer.mozilla.org/docs/Web/API/NodeList) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** DOM node/s to parse
  43. - `name` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** either the name of the attribute to set
  44. or a list of properties as object key - value
  45. - `value` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the new value of the attribute (optional)
  46. #### Examples
  47. ```javascript
  48. import { set } from 'bianco.attr'
  49. const img = document.createElement('img')
  50. set(img, 'width', 100)
  51. // or also
  52. set(img, {
  53. width: 300,
  54. height: 300
  55. })
  56. ```
  57. Returns **([HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [NodeList](https://developer.mozilla.org/docs/Web/API/NodeList) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** the original array of elements passed to this function
  58. ### get
  59. Get any attribute from a single or a list of DOM nodes
  60. #### Parameters
  61. - `els` **([HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [NodeList](https://developer.mozilla.org/docs/Web/API/NodeList) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** DOM node/s to parse
  62. - `name` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** name or list of attributes to get
  63. #### Examples
  64. ```javascript
  65. import { get } from 'bianco.attr'
  66. const img = document.createElement('img')
  67. get(img, 'width') // => '200'
  68. // or also
  69. get(img, ['width', 'height']) // => ['200', '300']
  70. // or also
  71. get([img1, img2], ['width', 'height']) // => [['200', '300'], ['500', '200']]
  72. ```
  73. Returns **([Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) \| [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String))** list of the attributes found
  74. ### remove
  75. Remove any attribute from a single or a list of DOM nodes
  76. #### Parameters
  77. - `els` **([HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [NodeList](https://developer.mozilla.org/docs/Web/API/NodeList) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** DOM node/s to parse
  78. - `name` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** name or list of attributes to remove
  79. #### Examples
  80. ```javascript
  81. import { remove } from 'bianco.attr'
  82. remove(img, 'width') // remove the width attribute
  83. // or also
  84. remove(img, ['width', 'height']) // remove the width and the height attribute
  85. // or also
  86. remove([img1, img2], ['width', 'height']) // remove the width and the height attribute from both images
  87. ```
  88. Returns **([HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [NodeList](https://developer.mozilla.org/docs/Web/API/NodeList) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** the original array of elements passed to this function
  89. ### has
  90. Set any attribute on a single or a list of DOM nodes
  91. #### Parameters
  92. - `els` **([HTMLElement](https://developer.mozilla.org/docs/Web/HTML/Element) \| [NodeList](https://developer.mozilla.org/docs/Web/API/NodeList) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** DOM node/s to parse
  93. - `name` **([string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** name or list of attributes to detect
  94. #### Examples
  95. ```javascript
  96. import { has } from 'bianco.attr'
  97. has(img, 'width') // false
  98. // or also
  99. has(img, ['width', 'height']) // => [false, false]
  100. // or also
  101. has([img1, img2], ['width', 'height']) // => [[false, false], [false, false]]
  102. ```
  103. Returns **([boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) \| [Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array))** true or false or an array of boolean values