csssync.md

CSS/cssSync()

This function sets or returns one or more style properties for the given element. It is a convenient alternative to window.getComputedStyle and ElementCSSInlineStyle.style. It also has special support for vendor-prefixed properties.

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

Import

import cssSync from '@web-native-js/play-ui/src/css/cssSync.js';

Syntax

// Method signature
cssSync(el, ...args);

> Set/Unset Inline Styles

// Set a single inline property
let el = cssSync(el, name, value);
// Unset a single inline property
let el = cssSync(el, name, '');

// Set multiple inline properties
let el = cssSync(el, {
    name: value,
});
// Unset multiple inline properties
let el = cssSync(el, {
    name: '',
});

Parameters

• el - HTMLElement: The target DOM element.
• name - String: The CSS property to set or unset.
• value - String|Number: The property value to set. When an empty string '', the property is unset from the element's inline CSS.

Return

• HTMLElement - The target DOM element.

> Get Computed Properties

// Get a single computed property
let value = cssSync(el, name[, pseudo = null]);

// Get a multiple computed properties
let values = cssSync(el, [name][, pseudo = null]);

Parameters

• el - HTMLElement: The source DOM element.
• name - String|Array: The CSS property or list of properties to read. When an array, values are returnd as an object.
• pseudo - String: An optional specifier to read from the element's before or after pseudo elements.

Return

• String|Number|Object - The value for a single property. An object is returned specially for the transform rule. This object is easily stringifiable with its toString() method.
• Object - The values for multiple properties.

Usage

<div id="el" style="transform:translate(30, 40); color:red"></div>

let el = document.querySelector('#el');

// Set attribute
let values = cssSync(el, ['transform', 'color']);

// Show
console.log(values);
/**
{
    transform: {
        translate: [30, 40],
    },
    color: "red",
}
*/

// Stringify transform
console.log(values.transform + '');
// translate(30, 40)