classsync.md

DOM/classSync()

This function is a convenience function over attrSync() for setting/unsetting the class attribute or adding/removing entries on an element's class list.

The suffix Sync differentiates this method from its Async counterpart - classAsync(). Unlike the Async counterpart, classSync() is a normal function that runs in the same flow with that of the calling code.

Import

import classSync from '@web-native-js/play-ui/src/dom/classSync.js';

Syntax

// Method signature
classSync(el[, valOrMutation = null[, subValMutation = null]]);

> Set/Remove the Class Attribute

// Set the class attribute
let el = classSync(el, classlist);

// Remove the class attribute
let el = classSync(el, false);

Parameters

• el - HTMLElement: The target DOM element.
• classlist - String|Boolean: Space-delimitted class names. When true, the string "true" is implied. When false, the class attribute is unset from the element.

Return

• HTMLElement - The target DOM element.

> Add/Remove Class Entry

// Set a class entry
let el = classSync(el, entry, state === true);
// Remove a class entry
let el = classSync(el, entry, state === false);

Parameters

• el - HTMLElement: The target DOM element.
• entry - String: The classname to insert or remove.
• state - Boolean: The indication of insert or remove. When true, the given classname is inserted into the aelement's classlist. When false, the given classname is removed from the aelement's classlist.

Return

• HTMLElement - The target DOM element.

> Get the Class Attribute

let classlist = classSync(el);

Parameters

• el - HTMLElement: The source DOM element.

Return

• String - The element's classlist.

Usage

<div class="class1 class2"></div>

let article = document.querySelector('.class1');

// Insert a class entry
classSync(article, 'class3', true);

// Get the classlist
let classlist = classSync(article);