Skip to main content

Part 3 / Advanced bindings / Dimensions

Every block-level element has clientWidth, clientHeight, offsetWidth and offsetHeight bindings:

App.svelte
<div bind:clientWidth={w} bind:clientHeight={h}>
	<span style="font-size: {size}px">{text}</span>
</div>

These bindings are readonly — changing the values of w and h won't have any effect.

Elements are measured using a technique similar to this one. There is some overhead involved, so it's not recommended to use this for large numbers of elements.

display: inline elements cannot be measured with this approach; nor can elements that can't contain other elements (such as <canvas>). In these cases you will need to measure a wrapper element instead.

Next: This

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
	let w;
	let h;
	let size = 42;
	let text = 'edit me';
</script>
 
<input type="range" bind:value={size} />
<input bind:value={text} />
 
<p>size: {w}px x {h}px</p>
 
<div>
	<span style="font-size: {size}px">{text}</span>
</div>
 
<style>
	input {
		display: block;
	}
	div {
		display: inline-block;
	}
	span {
		word-break: break-all;
	}
</style>
initialising