setStyle

Imperatively set a single style property on an element, unwrapping reactive values. A value of null, undefined or false removes the property. The declarative form is style:__ (or a style object); for entire stylesheets see css.

Call setStyle directly when you are building elements imperatively, writing a ref-driven effect, or animating a property outside the render tree.

Arguments

name	type	description
node	Element	Target element.
name	string	CSS property name (kebab-case, e.g. 'border-radius').
value	string | number | () => ...	Property value; functions are unwrapped reactively. null / undefined / false remove the property.

Returns: void

Examples

Cursor-following dot

Drives the left/top of an absolutely-positioned span from x/y signals updated on mousemove, by reading the signals inside a reactive child.

import { ref, render, setStyle, signal } from 'pota'

function App() {
	const dot = ref()
	const x = signal(0)
	const y = signal(0)

	return (
		<div
			on:mousemove={e => {
				x.write(e.clientX)
				y.write(e.clientY)
			}}
			style={{
				width: '100vw',
				height: '100vh',
				position: 'relative',
			}}
		>
			<span
				use:ref={dot}
				style={{
					position: 'absolute',
					width: '10px',
					height: '10px',
					background: 'red',
					'border-radius': '50%',
				}}
			/>
			{() => {
				setStyle(dot(), 'left', `${x.read()}px`)
				setStyle(dot(), 'top', `${y.read()}px`)
			}}
		</div>
	)
}

render(App)

Setting styles from a ref

Applies reactive style properties once the element is captured, here from inside an effect.

import { effect, ref, render, setStyle } from 'pota'

function App() {
	const element = ref()

	effect(() => {
		if (element()) {
			setStyle(element(), 'padding', () => '8px')
			setStyle(element(), 'border', () => '4px solid blue')
		}
	})

	return <div use:ref={element} />
}

render(App)