69 lines
2.9 KiB
TypeScript
69 lines
2.9 KiB
TypeScript
|
/**
|
||
|
|
* @file src/modules/css/styles.ts
|
||
|
|
* @version 2.0.4
|
||
|
|
* @since 2.0.0
|
||
|
|
* @license GPL-3.0-or-later
|
||
|
|
* @copyright Sven Minio 2026
|
||
|
|
* @author Sven Minio <https://sven-minio.de>
|
||
|
|
* @category CSS
|
||
|
|
* @description
|
||
|
|
* * Methods for getting and setting inline CSS styles.
|
||
|
|
* @requires ../../core
|
||
|
|
* * Depends on the core jBase class for type definitions.
|
||
|
|
*/
|
||
|
|
|
||
|
|
import { jBase } from '../../core';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* * Gets a CSS property value from the first element or sets one/multiple CSS properties for all elements.
|
||
|
|
* @example css('color', 'red') => Sets the 'color' style to 'red' for all matched elements.
|
||
|
|
* @example css({ color: 'red', backgroundColor: 'blue' }) => Sets multiple styles for all matched elements.
|
||
|
|
* @example css('color') => Returns the computed 'color' value of the first matched element.
|
||
|
|
* @param property A CSS property name as a string, or an object of property-value pairs to set multiple styles.
|
||
|
|
* @param value (Optional) The value to set if `property` is a string. If undefined and `property` is a string, acts as a getter.
|
||
|
|
* @returns The CSS value as a string when reading, or the jBase instance when writing.
|
||
|
|
*/
|
||
|
|
export function css(this: jBase, property: string | Record<string, string | number>, value?: string | number): string | jBase {
|
||
|
|
if (typeof property === 'object' && property !== null) {
|
||
|
|
this.each(function(el) {
|
||
|
|
if (el instanceof HTMLElement || el instanceof SVGElement) {
|
||
|
|
for (const key in property) {
|
||
|
|
if (Object.prototype.hasOwnProperty.call(property, key)) {
|
||
|
|
if (key.includes('-')) {
|
||
|
|
el.style.setProperty(key, String(property[key]));
|
||
|
|
} else {
|
||
|
|
(el.style as any)[key] = property[key];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return this;
|
||
|
|
}
|
||
|
|
if (typeof property === 'string') {
|
||
|
|
if (value === undefined) {
|
||
|
|
const el = this[0];
|
||
|
|
if (el instanceof HTMLElement || el instanceof SVGElement) {
|
||
|
|
const doc = el.ownerDocument;
|
||
|
|
const win = doc ? doc.defaultView : null;
|
||
|
|
if (win) {
|
||
|
|
return win.getComputedStyle(el).getPropertyValue(property) || win.getComputedStyle(el)[property as any] || '';
|
||
|
|
} else {
|
||
|
|
return (el.style as any)[property] || '';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return '';
|
||
|
|
}
|
||
|
|
this.each(function(el) {
|
||
|
|
if (el instanceof HTMLElement || el instanceof SVGElement) {
|
||
|
|
if (property.includes('-')) {
|
||
|
|
el.style.setProperty(property, String(value));
|
||
|
|
} else {
|
||
|
|
(el.style as any)[property] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
return this;
|
||
|
|
}
|