mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
17 lines
809 B
17 lines
809 B
6 years ago
|
---
|
||
|
title: Dimensions
|
||
|
---
|
||
|
|
||
|
Every block-level element has `clientWidth`, `clientHeight`, `offsetWidth` and `offsetHeight` bindings:
|
||
|
|
||
|
```html
|
||
|
<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](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/). 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.
|