{"id":13769225,"url":"https://jhildenbiddle.github.io/class-change/","last_synced_at":"2025-05-11T01:31:45.853Z","repository":{"id":47177633,"uuid":"53227191","full_name":"jhildenbiddle/class-change","owner":"jhildenbiddle","description":"A micro-library for manipulating CSS class names, triggering change events using HTML data attributes, and creating declarative class-related event listeners","archived":false,"fork":false,"pushed_at":"2024-02-07T00:29:44.000Z","size":1305,"stargazers_count":16,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T19:48:22.011Z","etag":null,"topics":["attributes","change","class","classlist","css","data","event","event-listener","html","listener","polyfill","ponyfill"],"latest_commit_sha":null,"homepage":"https://jhildenbiddle.github.io/class-change","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jhildenbiddle.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"jhildenbiddle"}},"created_at":"2016-03-05T22:53:30.000Z","updated_at":"2025-04-09T10:10:56.000Z","dependencies_parsed_at":"2024-08-03T17:01:52.692Z","dependency_job_id":null,"html_url":"https://github.com/jhildenbiddle/class-change","commit_stats":{"total_commits":145,"total_committers":3,"mean_commits":"48.333333333333336","dds":"0.35862068965517246","last_synced_commit":"837fa94281b7ec82036a4958d799ecbc1883ae76"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fclass-change","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fclass-change/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fclass-change/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jhildenbiddle%2Fclass-change/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jhildenbiddle","download_url":"https://codeload.github.com/jhildenbiddle/class-change/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253504555,"owners_count":21918830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["attributes","change","class","classlist","css","data","event","event-listener","html","listener","polyfill","ponyfill"],"created_at":"2024-08-03T17:00:19.802Z","updated_at":"2025-05-11T01:31:45.384Z","avatar_url":"https://github.com/jhildenbiddle.png","language":"JavaScript","funding_links":["https://github.com/sponsors/jhildenbiddle"],"categories":["Showcase"],"sub_categories":[],"readme":"# class-change.js\n\n[![NPM](https://img.shields.io/npm/v/class-change.svg?style=flat-square)](https://www.npmjs.com/package/class-change)\n[![GitHub Workflow Status (master)](https://img.shields.io/github/actions/workflow/status/jhildenbiddle/class-change/test.yml?branch=master\u0026label=checks\u0026style=flat-square)](https://github.com/jhildenbiddle/class-change/actions?query=branch%3Amaster+)\n[![Codacy code quality](https://img.shields.io/codacy/grade/d656ba140a6e488ab9db2f33183f760e/master?style=flat-square)](https://app.codacy.com/gh/jhildenbiddle/class-change/dashboard?branch=master)\n[![Codacy branch coverage](https://img.shields.io/codacy/coverage/d656ba140a6e488ab9db2f33183f760e/master?style=flat-square)](https://app.codacy.com/gh/jhildenbiddle/class-change/dashboard?branch=master)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg?style=flat-square)](https://github.com/jhildenbiddle/class-change/blob/master/LICENSE)\n[![Sponsor this project](https://img.shields.io/static/v1?style=flat-square\u0026label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86)](https://github.com/sponsors/jhildenbiddle)\n\nA versatile [Element.classList](https://developer.mozilla.org/en/DOM/element.classList) alternative for manipulating CSS class names, triggering class change events using HTML data attributes, and creating class-related event listeners using a simple, declarative API.\n\n- [Documentation](https://jhildenbiddle.github.io/class-change)\n- [Codepen Demo](https://codepen.io/jhildenbiddle/pen/wvmYVML)\n\n## Why?\n\nCSS class names change. A lot.\n\nNative methods for manipulating CSS class names are rudimentary given how often we need them. [Element.classList](https://developer.mozilla.org/en/DOM/element.classList) provides a basic API for working with classes, but changes can only be applied to a single element and separate event listeners must be created for each class change event. Legacy browsers also suffer from [incomplete implementations](http://caniuse.com/#feat=classlist) or lack support entirely. The result is unnecessary code bloat and complexity from repeated loops and boilerplate code, polyfills for legacy browsers, and potential performance issues caused by a high volume of event listeners. This micro-library addresses these issues by reducing and simplifying the code required for handling CSS class changes for modern and legacy browsers.\n\n## Features\n\n- Apply class changes to Arrays, CSS Selectors, HTMLCollections, and NodeLists\n- Trigger class changes using HTML data attributes\n- Create class change event listeners using a simple, declarative API\n- Legacy browser support (IE9+)\n- ES and UMD modules available\n- Lightweight (1.6k min+gzip) and dependency-free\n\n## Usage \u0026 Options\n\nSee the [documentation site](https://jhildenbiddle.github.io/class-change/) for details.\n\n## Sponsorship\n\nA [sponsorship](https://github.com/sponsors/jhildenbiddle) is more than just a way to show appreciation for the open-source authors and projects we rely on; it can be the spark that ignites the next big idea, the inspiration to create something new, and the motivation to share so that others may benefit.\n\nIf you benefit from this project, please consider lending your support and encouraging future efforts by [becoming a sponsor](https://github.com/sponsors/jhildenbiddle).\n\nThank you! 🙏🏻\n\n## Contact \u0026 Support\n\n- Follow 👨🏻‍💻 **@jhildenbiddle** on [Twitter](https://twitter.com/jhildenbiddle) and [GitHub](https://github.com/jhildenbiddle) for announcements\n- Create a 💬 [GitHub issue](https://github.com/jhildenbiddle/class-change/issues) for bug reports, feature requests, or questions\n- Add a ⭐️ [star on GitHub](https://github.com/jhildenbiddle/class-change) and 🐦 [tweet](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fjhildenbiddle%2Fclass-change\u0026hashtags=css,developers,frontend,javascript) to promote the project\n- Become a 💖 [sponsor](https://github.com/sponsors/jhildenbiddle) to support the project and future efforts\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](https://github.com/jhildenbiddle/class-change/blob/master/LICENSE) for details.\n\nCopyright (c) John Hildenbiddle ([@jhildenbiddle](https://twitter.com/jhildenbiddle))\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/jhildenbiddle.github.io%2Fclass-change%2F","html_url":"https://awesome.ecosyste.ms/projects/jhildenbiddle.github.io%2Fclass-change%2F","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/jhildenbiddle.github.io%2Fclass-change%2F/lists"}