CSS mengubah ukuran Properti
Contoh
Di sini, pengguna dapat mengubah ukuran tinggi dan lebar elemen <div>:
div {
resize: both;
overflow: auto;
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Properti resize
mendefinisikan jika (dan bagaimana) suatu elemen dapat diubah ukurannya oleh pengguna.
Catatan: Properti resize
tidak berlaku untuk elemen sebaris atau untuk memblokir elemen di mana overflow="terlihat". Jadi, pastikan overflow diatur ke "scroll", "auto", atau "hidden".
Nilai bawaan: | tidak ada |
---|---|
Diwarisi: | tidak |
Animasi: | tidak. Baca tentang animasi |
Versi: kapan: | CSS3 |
Sintaks JavaScript: | objek .style.resize="keduanya" |
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.
Angka diikuti oleh -moz- menentukan versi pertama yang berfungsi dengan awalan.
Property | |||||
---|---|---|---|---|---|
resize | 4.0 | 79.0 | 5.0 4.0 -moz- |
4.0 | 15.0 |
Sintaks CSS
resize: none|both|horizontal|vertical|initial|inherit;
Nilai properti
Value | Description | Play it |
---|---|---|
none | Default value. The user cannot resize the element | |
both | The user can resize both the height and width of the element | |
horizontal | The user can resize the width of the element | |
vertical | The user can resize the height of the element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Lebih Banyak Contoh
Contoh
Biarkan pengguna mengubah ukuran hanya tinggi elemen <div>:
div
{
resize: vertical;
overflow: auto;
}
Contoh
Biarkan pengguna mengubah ukuran hanya lebar elemen <div>:
div
{
resize: horizontal;
overflow: auto;
}
Contoh
Di banyak browser, <textarea> dapat diubah ukurannya secara default. Di sini, kami telah menggunakan properti resize untuk menonaktifkan resizability:
textarea {
resize: none;
}
Halaman Terkait
Tutorial CSS: Antarmuka Pengguna CSS
Referensi DOM HTML: mengubah ukuran properti