Skip to main content
Basic Svelte
Introduction
Reactivity
Props
Logic
Events
Bindings
Classes and styles
Actions
Transitions
Advanced Svelte
Advanced reactivity
Reusing content
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
Forms
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Hooks
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion

任意の要素に clientWidthclientHeightoffsetWidthoffsetHeight バインディングを追加することができます。Svelte は、これらのバインドされた値を ResizeObserver を使用して更新します:

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

これらのバインディングは読み取り専用です。wh の値を変更しても要素に何の影響もありません。

display: inline 要素は width や height を持ちません (<img><canvas> のような ‘intrinsic’ なディメンションを持つ要素は除く)、また ResizeObserver で監視することもできません。これらの要素の display スタイルを、inline-block などに変更する必要があります。

Edit this page on GitHub

previous next
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
29
30
31
32
33
34
35
36
37
38
39
40
<script>
	let w = $state();
	let h = $state();
	let size = $state(42);
</script>
 
<label>
	<input type="range" bind:value={size} min="10" max="100" />
	font size ({size}px)
</label>
 
<div>
	<span style="font-size: {size}px" contenteditable>
		edit this text
	</span>
 
	<span class="size">{w} x {h}px</span>
</div>
 
<style>
	div {
		position: relative;
		display: inline-block;
		padding: 0.5rem;
		background: hsla(15, 100%, 50%, 0.1);
		border: 1px solid hsl(15, 100%, 50%);
	}
 
	.size {
		position: absolute;
		right: -1px;
		bottom: -1.4em;
		line-height: 1;
		background: hsl(15, 100%, 50%);
		color: white;
		padding: 0.2em 0.5em;
		white-space: pre;
	}
</style>