Change HTML Attributes at Specific Breakpoints – Rattribute.js

Rattribute.js is a dependency-free JavaScript utility that changes HTML attributes at defined viewport widths.

It works with built-in xs through xxxl thresholds, custom pixel widths, multiple attribute assignments, and values returned from JavaScript functions.

Rattribute.js updates class, target, ARIA attributes, or any other HTML attribute as the viewport changes.

It also watches for new DOM elements by default and exposes methods for pausing updates, rescanning the document, refreshing values, and changing runtime configuration.

Features

• Built-in viewport thresholds from xs through xxxl.
• Custom numeric breakpoints for project-specific widths.
• Multiple attribute assignments in one data-* rule.
• Attribute values returned from JavaScript functions.
• Original attribute values restored outside active breakpoints.
• Automatic discovery of DOM elements inserted after page load.
• Per-element ignore control.
• Runtime controls for scanning, refresh, automation, and configuration.

How To Use It

Installation

Load the minified build directly in your document:

<script src="https://cdn.jsdelivr.net/gh/williamtroup/Rattribute.js/dist/rattribute.min.js"></script>

Or install the package with NPM:

npm install rattribute.js

Basic Usage

Rattribute.js starts automatically after the DOM is ready. No initialization call is required for the default setup.

A responsive rule uses attribute=value;attribute=value inside a breakpoint data attribute. This link keeps its original attributes below 992px. At 992px and above, Rattribute.js changes both target and class.

<a
  href="https://example.com/docs"
  class="docs-link"
  target="_self"
  rel="noopener"
  data-rattribute-js-lg="target=_blank;class=docs-link docs-link--desktop">
  Documentation
</a>

Built-In Breakpoints

Custom Breakpoints

Use a numeric suffix for a custom minimum width. This rule applies from 850px.

<button
  type="button"
  class="menu-toggle"
  aria-label="Open menu"
  data-rattribute-js-850="class=menu-toggle menu-toggle--wide;aria-label=Open desktop menu">
  Menu
</button>

Use Function Results As Attribute Values

Rattribute.js resolves function references from globalThis. The function result becomes the new attribute value.

<script>
function getNavigationLabel() {
  return 'Open desktop navigation';
}
</script>
<button
  type="button"
  aria-label="Open navigation"
  data-rattribute-js-lg="aria-label=getNavigationLabel()">
  Menu
</button>

Function arguments are split on commas, and each argument is parsed as JSON. Quoted strings, numbers, booleans, and other simple JSON values work well here.

<script>
function buildLabel(section, count) {
  return `${section} navigation, ${count} items`;
}
</script>
<button
  type="button"
  aria-label="Navigation"
  data-rattribute-js-lg='aria-label=buildLabel("Primary", 4)'>
  Menu
</button>

Ignore Elements

Set data-rattribute-js-ignore="true" when an element should not be processed.

<div
  data-rattribute-js-ignore="true"
  data-rattribute-js-lg="class=desktop-panel">
  ...
</div>

Configuration Options

• responsiveDelay (number, default 250): Delay in milliseconds before responsive rules run after a resize event.
• removeAttributes (boolean, default true): Removes Rattribute.js data attributes after they have been processed.
• enabled (boolean, default true): Starts responsive automation when the library loads.
• observationMode (boolean, default true): Watches the DOM for newly inserted elements and processes them automatically.
• assignMissingIds (boolean, default false): Generates an ID for processed elements that do not already have one. The current implementation uses crypto.randomUUID(), which requires a secure context in supporting browsers.
• elementIdPrefix (string, default "rattribute"): Prefix used for generated IDs when assignMissingIds is enabled.

$rattribute.setConfiguration({
  responsiveDelay: 150,
  removeAttributes: false
});

API Methods

Alternatives And Related Resources

• Responsive Link Targets by Viewport Width – Rink.js
• Responsive Breakpoint Management with JsWidthBreakpoints Library