attrsync.md

DOM/attrSync()

This function sets or gets an element's attribute. It is the shorter alternative to Element.setAttribute(), Element.getAttribute(), and Element.removeAttribute(). It also has special support for list-based attributes like class.

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

Import

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

Syntax

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

> Set/Remove Attribute

// Set a single attribute
let el = attrSync(el, name, value);
// Remove a single attribute
let el = attrSync(el, name, false);

// Set multiple attributes
let el = attrSync(el, {
    name: value,
});
// Remove multiple attributes
let el = attrSync(el, {
    name: false,
});

Parameters

• el - HTMLElement: The target DOM element.
• name - String: The attribute name to set or remove.
• value - String|Boolean: The attribute value to set. When true, the string "true" is set on the attribute. When false, the attribute is unset from the element.

Return

• HTMLElement - The target DOM element.

> Set/Remove Attribute Entry

// Set a single attribute entry
let el = attrSync(el, name, entry, state === true);
// Remove a single attribute entry
let el = attrSync(el, name, entry, state === false);

// Set multiple attribute entries
let el = attrSync(el, {
    name: entry,
}, state === true);
// Remove multiple attribute entries
let el = attrSync(el, {
    name: entry,
}, state === false);

Parameters

• el - HTMLElement: The target DOM element.
• name - String: The attribute name to modify.
• entry - String: The text to insert or remove.
• state - Boolean: The indication of insert or remove. When true, the given text is inserted into the attribute's value list. When false, the given text is removed from the attribute's value list.

Return

• HTMLElement - The target DOM element.

> Get Attribute

let value = attrSync(el, name);

Parameters

• el - HTMLElement: The source DOM element.
• name - String: The attribute name to read.

Return

• String - The attribute value.

Usage

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

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

// Set attribute
attrSync(article, 'role', 'main');

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

// Get attribute value
let value = attrSync(article, 'role');