Skip to main content
100%

Synopsis

✓ Published0🌍 Public
Aabernier
Last edited Mar 25, 2015
Created on Mar 25, 2015

This example shows a DOM element’s CSS style properties being monitored for changes, logging each modification with its old and new values. It demonstrates both a single-property listener and a multi-property change handler. The code uses Backbone.Events for event handling, MutationObserver to detect style attribute mutations, and Underscore for utility functions. The demo binds to `transform-origin` and `border-radius` on a div, then programmatically updates `transform-origin` after one second, triggering the change callbacks.

AI-generated description

Watch a DOM element for [style] css properties changes.

It uses MutationObserver internally

Synopsis

new Watchcss(el, ['propA', 'propB', ...])
  .observe()
  .disconnect()
  .on('change', function (changes) {})
  .on('change:propA', function (change) {})

Usage

var el = document.getElementById('foo');

var watchcss = new Watchcss(el, ['transform-origin', 'border-radius']);

watchcss.on('change', function (changes) {
  console.log('transform-origin OR border-radius have changed!', changes);
});

outputs:

[
  {
    propName: 'transform-origin',
    oldValue: 'center center',
    newValue: 'left center'
  },
  {
    propName: 'border-radius',
    oldValue: '3px',
    newValue: '10px'
  }
]

or with a single property:

watchcss.on('change:transform-origin', function (change) {
  console.log('transform-origin has changed!', change);
});

outputs:

{
  propName: 'transform-origin',
  oldValue: 'center center',
  newValue: 'left center'
}
ISC Licensed

Similar vizzes

Loading thumbnail…

Gist 5bc89f176a762b6fc64a

This example demonstrates the MutationObserver API monitoring changes to a DOM element. The code observes a target node (referenced via `$0`) with a configuration that tracks child list, attribute, and character data mutations across the entire subtree, including old values. When mutations occur, the observer logs each change to the console, grouping observations by a random numeric identifier and printing the target node’s name and mutation type. The visualization relies on browser-native console grouping and logging, with no external data source or rendering library involved.

Aalessioalex
70% match
Loading thumbnail…

Gist a228815e7f945fd39d1dc914fcc32a43

This example uses A-Frame to demonstrate live observation of an HTML attribute change within a 3D scene. It shows how the `MutationObserver` API logs the `position` attribute of an `a-sphere` element as the code updates it from "0 2.75 -5" to "0 1.75 -5". The observer is configured with `{attributes:true}` to trigger on attribute modifications, printing the changed attribute name, new value, and target node to the console. The code directly interacts with the scene via `AFRAME.scenes[0]` and standard DOM querying.

UUtopiah
68% match
Loading thumbnail…

https://jsfiddle.net/developit/q435c6mL/

This example implements a live DOM audit logger that intercepts and records modifications to page elements as they occur. It demonstrates real-time logging of property changes (textContent, innerHTML, className) and node insertions/removals, displaying a formatted trail of each operation with previous and current values. The visualization uses the DOMAuditLogger library, which patches native Element and Node prototype methods to capture events, and renders the audit entries in a scrolling view with color-coded message types.

JJastor11
65% match
Loading thumbnail…

Manipulating DOM

This example demonstrates how D3.js can dynamically manipulate HTML elements in the DOM. Using d3.select, the code changes text colors, background colors, and list attributes when the "Change!" button is clicked, and resets them with the "Reset!" button. The page includes a heading, paragraphs, and ordered/unordered lists styled via CSS, showing D3's ability to modify existing web content beyond SVG visualization.

SSreenivasulu
60% match
Loading thumbnail…

A simple DOM component (for angular and angular-ecs)

This example shows how to wrap raw DOM elements as AngularJS jqLite objects, enabling Angular-ECS components to manipulate them with familiar jQuery-like methods. It detects the browser’s CSS vendor prefix via `window.getComputedStyle` and regular expressions, then uses that prefix to set the `transform` property with `translate3d` for efficient GPU-accelerated positioning. The `Dom` class extends `angular.element`, allowing direct style changes through a custom `setPosition` method, while the prefix detection ensures cross-browser compatibility. The code relies on Angular’s built-in jqLite and demonstrates a lightweight alternative to heavier DOM abstraction libraries.

HHypercubed
59% match
Loading thumbnail…

Gist 2654204

This example demonstrates how to dynamically swap CSS class names on DOM elements using a jQuery plugin. It shows a reusable `replaceClass` method that leverages the native `String.replace` function, accepting either a regexp or substring as the old class and a string or function as the replacement. The plugin iterates over each matched element via `this.each`, modifying the `class` attribute through jQuery’s `attr` callback. The code relies on jQuery’s core APIs, specifically `$.fn.each` and `$.fn.attr`, to perform the replacement without altering other attributes or event handlers. The data source is the element’s existing class attribute, and the rendering approach is direct DOM manipulation.

Aabernier
59% match
Loading thumbnail…

Fork of HTML Starter

This example displays a grid of 100 circular blue elements that turn red on hover, demonstrating how CSS styling and JavaScript interact to create interactive visuals. The code uses vanilla JavaScript with the Document Object Model (DOM) API, specifically `document.createElement` and `document.body.append`, to generate the circles dynamically. Styling relies on CSS flexbox for layout, `border-radius` for round shapes, and the `:hover` pseudo-class to change background color. The visualization shows a simple, responsive pattern where each circle responds independently to user interaction, illustrating basic DOM manipulation and event-driven styling without external libraries.

YYiorgos Bagakis
59% match
Loading thumbnail…

Gist 8420271

This example demonstrates a React-style virtual DOM implementation using the `virtual-dom` library, showcasing a Todo app with animated state updates. The code builds a virtual DOM tree from observable state (via `observ`), renders it to a real DOM element, and uses a diffing algorithm to compute minimal changes between state versions. A requestAnimationFrame loop batches these patches and applies them at 60fps, ensuring smooth UI updates while preserving input focus and other temporary state. The visualization highlights how the virtual DOM approach separates concerns: `h` constructs virtual nodes, `render` creates the initial DOM, `diff` computes changes, and `batch`/`patch` apply them efficiently—all orchestrated with reactive observables and a delegator for events.

Aalessioalex
58% match