Skip to main content

Mọi phần tử cấp khối đều có các phép bind clientWidth, clientHeight, offsetWidth và offsetHeight:

App.svelte
<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>

Những phép bind này là chỉ đọc — việc thay đổi giá trị của w và h sẽ không có ảnh hưởng gì đối với phần tử.

Các phần tử được đo lường bằng một kỹ thuật tương tự như kỹ thuật này. Việc này là tốn tài nguyên nên không khuyến khích sử dụng cho số lượng lớn phần tử.

Các phần tử có display: inline không thể được đo lường bằng cách tiếp cận này; cũng như các phần tử không thể chứa các phần tử khác (như <canvas>). Trong những trường hợp này, bạn sẽ cần đo một phần tử bọc ngoài.

Tiếp theo: 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
29
30
31
32
33
34
35
36
37
38
<script>
	let w;
	let h;
	let size = 42;
	let text = 'chỉnh sửa nội dung này';
</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>{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>
initialising