Menggunakan JavaScript untuk Mengubah Property Element
(contoh elemen disini adalah tag button )
Coba kode ini:- <!DOCTYPE html>
- <html>
- <body>
- <button type="button" id="myBtn" onclick="
- this.style.width = '300px',
- this.style.height = '300px',
- this.style.backgroundColor='red',
- this.style.borderColor='black',
- this.style.borderBottomWidth='20px',
- this.style.borderTopLeftRadius='200px',
- this.style.borderBottomRightRadius='100px';">
- Change the dimension, color, border of this button
- </button>
- </body>
- </html>
Berikut ini daftar lengkap properti dari 'style':
No. |
Nama Properti |
Fungsi |
| 1 | alignContent | Mengatur atau mengembalikan keselarasan antara garis di dalam wadah fleksibel ketika item tidak menggunakan semua ruang yang tersedia |
| 2 | alignItems | Mengatur atau mengembalikan perataan untuk item di dalam wadah fleksibel |
| 3 | alignSelf | Mengatur atau mengembalikan perataan untuk item yang dipilih di dalam wadah fleksibel |
| 4 | animation | Properti singkatan untuk semua properti animasi di bawah ini, kecuali properti animationPlayState |
| 5 | animationDelay | Menyetel atau mengembalikan kapan animasi akan dimulai |
| 6 | animationDirection | Menyetel atau mengembalikan apakah animasi harus diputar secara terbalik pada siklus alternatif |
| 7 | animationDuration | Menyetel atau mengembalikan berapa detik atau milidetik yang diperlukan animasi untuk menyelesaikan satu siklus |
| 8 | animationFillMode | Menetapkan atau mengembalikan nilai apa yang diterapkan oleh animasi di luar waktu eksekusi |
| 9 | animationIterationCount | Menyetel atau mengembalikan berapa kali animasi harus dimainkan |
| 10 | animationName | Menetapkan atau mengembalikan nama untuk animasi @keyframes |
| 11 | animationTimingFunction | Mengatur atau mengembalikan kurva kecepatan animasi |
| 12 | animationPlayState | Menyetel atau mengembalikan apakah animasi sedang berjalan atau dijeda |
| 13 | background | Menetapkan atau mengembalikan semua properti latar belakang dalam satu deklarasi |
| 14 | backgroundAttachment | Mengatur atau mengembalikan apakah gambar latar belakang diperbaiki atau bergulir dengan halaman |
| 15 | backgroundColor | Menyetel atau mengembalikan warna latar suatu elemen |
| 16 | backgroundImage | Menyetel atau mengembalikan gambar latar untuk suatu elemen |
| 17 | backgroundPosition | Mengatur atau mengembalikan posisi awal gambar latar |
| 18 | backgroundRepeat | Menyetel atau mengembalikan cara mengulang (ubin) gambar latar |
| 19 | backgroundClip | Mengatur atau mengembalikan area lukisan latar belakang |
| 20 | backgroundOrigin | Mengatur atau mengembalikan area pemosisian gambar latar belakang |
| 21 | backgroundSize | Mengatur atau mengembalikan ukuran gambar latar belakang |
| 22 | backfaceVisibility | Menyetel atau mengembalikan apakah suatu elemen harus terlihat atau tidak saat tidak menghadap layar |
| 23 | border | Menetapkan atau mengembalikan borderWidth, borderStyle, dan borderColor dalam satu deklarasi |
| 24 | borderBottom | Menetapkan atau mengembalikan semua properti borderBottom dalam satu deklarasi |
| 25 | borderBottomColor | Mengatur atau mengembalikan warna batas bawah |
| 26 | borderBottomLeftRadius | Mengatur atau mengembalikan bentuk batas sudut kiri bawah |
| 27 | borderBottomRightRadius | Mengatur atau mengembalikan bentuk batas sudut kanan bawah |
| 28 | borderBottomStyle | Mengatur atau mengembalikan gaya batas bawah |
| 29 | borderBottomWidth | Mengatur atau mengembalikan lebar batas bawah |
| 30 | borderCollapse | Menyetel atau mengembalikan apakah batas tabel harus diciutkan menjadi satu batas, atau tidak |
| 31 | borderColor | Menetapkan atau mengembalikan warna batas elemen (dapat memiliki hingga empat nilai) |
| 32 | borderImage | Properti singkatan untuk mengatur atau mengembalikan semua properti borderImage |
| 33 | borderImageOutset | Menyetel atau mengembalikan jumlah area gambar perbatasan melampaui kotak perbatasan |
| 34 | borderImageRepeat | Menyetel atau mengembalikan apakah batas gambar harus diulang, dibulatkan, atau diregangkan |
| 35 | borderImageSlice | Mengatur atau mengembalikan offset ke dalam batas gambar |
| 36 | borderImageSource | Mengatur atau mengembalikan gambar yang akan digunakan sebagai batas |
| 37 | borderImageWidth | Menyetel atau mengembalikan lebar batas gambar |
| 38 | borderLeft | Menetapkan atau mengembalikan semua properti borderLeft dalam satu deklarasi |
| 39 | borderLeftColor | Mengatur atau mengembalikan warna batas kiri |
| 40 | borderLeftStyle | Menyetel atau mengembalikan gaya batas kiri |
| 41 | borderLeftWidth | Mengatur atau mengembalikan lebar batas kiri |
| 42 | borderRadius | Properti singkatan untuk mengatur atau mengembalikan keempat properti borderRadius |
| 43 | borderRight | Menetapkan atau mengembalikan semua properti borderRight dalam satu deklarasi |
| 44 | borderRightColor | Mengatur atau mengembalikan warna batas kanan |
| 45 | borderRightStyle | Menyetel atau mengembalikan gaya batas kanan |
| 46 | borderRightWidth | Mengatur atau mengembalikan lebar batas kanan |
| 47 | borderSpacing | Mengatur atau mengembalikan ruang antar sel dalam tabel |
| 48 | borderStyle | Menetapkan atau mengembalikan gaya batas elemen (dapat memiliki hingga empat nilai) |
| 49 | borderTop | Menetapkan atau mengembalikan semua properti borderTop dalam satu deklarasi |
| 50 | borderTopColor | Mengatur atau mengembalikan warna batas atas |
| 51 | borderTopLeftRadius | Mengatur atau mengembalikan bentuk batas sudut kiri atas |
| 52 | borderTopRightRadius | Mengatur atau mengembalikan bentuk batas sudut kanan atas |
| 53 | borderTopStyle | Menyetel atau mengembalikan gaya batas atas |
| 54 | borderTopWidth | Mengatur atau mengembalikan lebar batas atas |
| 55 | borderWidth | Menetapkan atau mengembalikan lebar batas elemen (dapat memiliki hingga empat nilai) |
| 56 | bottom | Mengatur atau mengembalikan posisi terbawah dari elemen yang diposisikan |
| 57 | boxDecorationBreak | Menyetel atau mengembalikan perilaku latar belakang dan batas elemen pada jeda halaman, atau, untuk elemen sebaris, pada jeda baris. |
| 58 | boxShadow | Melampirkan satu atau lebih drop-shadow ke kotak |
| 59 | boxSizing | Memungkinkan Anda untuk menentukan elemen tertentu agar sesuai dengan area dengan cara tertentu |
| 60 | captionSide | Mengatur atau mengembalikan posisi keterangan tabel |
| 61 | caretColor | Mengatur atau mengembalikan warna tanda sisipan/kursor suatu elemen |
| 62 | clear | Menetapkan atau mengembalikan posisi elemen relatif terhadap objek mengambang |
| 63 | clip | Mengatur atau mengembalikan bagian mana dari elemen yang diposisikan terlihat |
| 64 | color | Mengatur atau mengembalikan warna teks |
| 65 | columnCount | Menetapkan atau mengembalikan jumlah kolom yang harus dibagi menjadi elemen |
| 66 | columnFill | Mengatur atau mengembalikan cara mengisi kolom |
| 67 | columnGap | Mengatur atau mengembalikan celah antar kolom |
| 68 | columnRule | Properti singkatan untuk mengatur atau mengembalikan semua properti columnRule |
| 69 | columnRuleColor | Menetapkan atau mengembalikan warna aturan antar kolom |
| 70 | columnRuleStyle | Menetapkan atau mengembalikan gaya aturan antar kolom |
| 71 | columnRuleWidth | Menetapkan atau mengembalikan lebar aturan antar kolom |
| 72 | columns | Properti singkatan untuk mengatur atau mengembalikan columnWidth dan columnCount |
| 73 | columnSpan | Menetapkan atau mengembalikan berapa banyak kolom yang harus direntangkan oleh suatu elemen |
| 74 | columnWidth | Mengatur atau mengembalikan lebar kolom |
| 75 | content | Digunakan dengan elemen pseudo :before dan :after, untuk menyisipkan konten yang dihasilkan |
| 76 | counterIncrement | Menambah satu atau lebih penghitung |
| 77 | counterReset | Membuat atau mengatur ulang satu atau lebih penghitung |
| 78 | cursor | Mengatur atau mengembalikan jenis kursor yang akan ditampilkan untuk penunjuk tetikus |
| 79 | direction | Mengatur atau mengembalikan arah teks |
| 80 | display | Menyetel atau mengembalikan tipe tampilan elemen |
| 81 | emptyCells | Mengatur atau mengembalikan apakah akan menampilkan batas dan latar belakang sel kosong, atau tidak |
| 82 | filter | Mengatur atau mengembalikan filter gambar (efek visual, seperti blur dan saturasi) |
| 83 | flex | Menetapkan atau mengembalikan panjang item, relatif terhadap sisanya |
| 84 | flexBasis | Menetapkan atau mengembalikan panjang awal item fleksibel |
| 85 | flexDirection | Mengatur atau mengembalikan arah item fleksibel |
| 86 | flexFlow | Properti singkatan untuk properti flexDirection dan flexWrap |
| 87 | flexGrow | Menetapkan atau mengembalikan berapa banyak item akan tumbuh relatif terhadap yang lain |
| 88 | flexShrink | Mengatur atau mengembalikan bagaimana item akan menyusut relatif terhadap yang lain |
| 89 | flexWrap | Mengatur atau mengembalikan apakah barang fleksibel harus dibungkus atau tidak |
| 90 | cssFloat | Menetapkan atau mengembalikan perataan horizontal suatu elemen |
| 91 | font | Menyetel atau mengembalikan fontStyle, fontVariant, fontWeight, fontSize, lineHeight, dan fontFamily dalam satu deklarasi |
| 92 | fontFamily | Mengatur atau mengembalikan keluarga font untuk teks |
| 93 | fontSize | Mengatur atau mengembalikan ukuran font teks |
| 94 | fontStyle | Menyetel atau mengembalikan apakah gaya font normal, miring, atau miring |
| 95 | fontVariant | Mengatur atau mengembalikan apakah font harus ditampilkan dalam huruf kapital kecil |
| 96 | fontWeight | Mengatur atau mengembalikan ketebalan font |
| 97 | fontSizeAdjust | Mempertahankan keterbacaan teks saat font fallback terjadi |
| 98 | fontStretch | Memilih font ukuran normal, condensed, atau diperluas dari keluarga font |
| 99 | hangingPunctuation | Menentukan apakah karakter tanda baca dapat ditempatkan di luar kotak garis |
| 100 | height | Menetapkan atau mengembalikan ketinggian elemen |
| 101 | hyphens | Mengatur cara membagi kata untuk meningkatkan tata letak paragraf |
| 102 | icon | Memberi penulis kemampuan untuk menata elemen dengan padanan ikonik |
| 103 | imageOrientation | Menentukan rotasi ke arah kanan atau searah jarum jam yang diterapkan agen pengguna ke gambar |
| 104 | isolation | Menentukan apakah suatu elemen harus membuat konten susun baru |
| 105 | justifyContent | Mengatur atau mengembalikan keselarasan antara item di dalam wadah fleksibel saat item tidak menggunakan semua ruang yang tersedia. |
| 106 | left | Mengatur atau mengembalikan posisi kiri dari elemen yang diposisikan |
| 107 | letterSpacing | Mengatur atau mengembalikan spasi antar karakter dalam teks |
| 108 | lineHeight | Mengatur atau mengembalikan jarak antar baris dalam teks |
| 109 | listStyle | Menyetel atau mengembalikan listStyleImage, listStylePosition, dan listStyleType dalam satu deklarasi |
| 110 | listStyleImage | Menetapkan atau mengembalikan gambar sebagai penanda item daftar |
| 111 | listStylePosition | Mengatur atau mengembalikan posisi penanda item daftar |
| 112 | listStyleType | Menyetel atau mengembalikan jenis penanda item daftar |
| 113 | margin | Menetapkan atau mengembalikan margin elemen (dapat memiliki hingga empat nilai) |
| 114 | marginBottom | Menetapkan atau mengembalikan margin bawah suatu elemen |
| 115 | marginLeft | Menetapkan atau mengembalikan margin kiri elemen |
| 116 | marginRight | Menetapkan atau mengembalikan margin kanan suatu elemen |
| 117 | marginTop | Menetapkan atau mengembalikan margin atas suatu elemen |
| 118 | maxHeight | Menetapkan atau mengembalikan ketinggian maksimum suatu elemen |
| 119 | maxWidth | Menetapkan atau mengembalikan lebar maksimum suatu elemen |
| 120 | minHeight | Menetapkan atau mengembalikan tinggi minimum suatu elemen |
| 121 | minWidth | Menetapkan atau mengembalikan lebar minimum elemen |
| 122 | navDown | Menyetel atau mengembalikan tempat untuk menavigasi saat menggunakan tombol navigasi panah-bawah |
| 123 | navIndex | Menyetel atau mengembalikan urutan tab untuk suatu elemen |
| 124 | navLeft | Menyetel atau mengembalikan tempat untuk menavigasi saat menggunakan tombol navigasi panah kiri |
| 125 | navRight | Menyetel atau mengembalikan tempat untuk menavigasi saat menggunakan tombol navigasi panah-kanan |
| 126 | navUp | Menyetel atau mengembalikan tempat untuk menavigasi saat menggunakan tombol navigasi panah ke atas |
| 127 | objectFit | Menentukan bagaimana isi elemen yang diganti harus dipasang ke kotak yang dibuat berdasarkan tinggi dan lebar yang digunakan |
| 128 | objectPosition | Menentukan keselarasan elemen yang diganti di dalam kotaknya |
| 129 | opacity | Menetapkan atau mengembalikan tingkat opacity untuk suatu elemen |
| 130 | order | Mengatur atau mengembalikan urutan item fleksibel, relatif terhadap yang lain |
| 131 | orphans | Menetapkan atau mengembalikan jumlah baris minimum untuk elemen yang harus ditinggalkan di bagian bawah halaman saat jeda halaman terjadi di dalam elemen |
| 132 | outline | Mengatur atau mengembalikan semua properti outline dalam satu deklarasi |
| 133 | outlineColor | Mengatur atau mengembalikan warna garis luar di sekitar elemen |
| 134 | outlineOffset | Mengimbangi garis besar, dan menggambarnya di luar tepi perbatasan |
| 135 | outlineStyle | Mengatur atau mengembalikan gaya kerangka di sekitar elemen |
| 136 | outlineWidth | Mengatur atau mengembalikan lebar garis luar di sekitar elemen |
| 137 | overflow | Menyetel atau mengembalikan apa yang harus dilakukan dengan konten yang dirender di luar kotak elemen |
| 138 | overflowX | Menentukan apa yang harus dilakukan dengan tepi kiri/kanan konten, jika melebihi area konten elemen |
| 139 | overflowY | Menentukan apa yang harus dilakukan dengan tepi atas/bawah konten, jika melebihi area konten elemen |
| 140 | padding | Menetapkan atau mengembalikan padding elemen (dapat memiliki hingga empat nilai) |
| 141 | paddingBottom | Mengatur atau mengembalikan padding bawah suatu elemen |
| 142 | paddingLeft | Mengatur atau mengembalikan padding kiri suatu elemen |
| 143 | paddingRight | Menetapkan atau mengembalikan padding yang tepat dari suatu elemen |
| 144 | paddingTop | Mengatur atau mengembalikan padding atas suatu elemen |
| 145 | pageBreakAfter | Menyetel atau mengembalikan perilaku page-break setelah elemen |
| 146 | pageBreakBefore | Menetapkan atau mengembalikan perilaku page-break sebelum elemen |
| 147 | pageBreakInside | Menyetel atau mengembalikan perilaku page-break di dalam elemen |
| 148 | perspective | Mengatur atau mengembalikan perspektif tentang bagaimana elemen 3D dilihat |
| 149 | perspectiveOrigin | Mengatur atau mengembalikan posisi terbawah elemen 3D |
| 150 | position | Menetapkan atau mengembalikan jenis metode penentuan posisi yang digunakan untuk suatu elemen (statis, relatif, absolut, atau tetap) |
| 151 | quotes | Menetapkan atau mengembalikan jenis tanda kutip untuk kutipan yang disematkan |
| 152 | resize | Menetapkan atau mengembalikan apakah suatu elemen dapat diubah ukurannya atau tidak oleh pengguna |
| 153 | right | Mengatur atau mengembalikan posisi yang tepat dari elemen yang diposisikan |
| 154 | scrollBehavior | Menentukan apakah akan menganimasikan posisi gulir dengan lancar, alih-alih lompatan lurus, saat pengguna mengeklik tautan di dalam kotak yang dapat digulir |
| 155 | tableLayout | Mengatur atau mengembalikan cara menata sel tabel, baris, dan kolom |
| 156 | tabSize | Menyetel atau mengembalikan panjang karakter tab |
| 157 | textAlign | Mengatur atau mengembalikan perataan horizontal teks |
| 158 | textAlignLast | Menyetel atau mengembalikan bagaimana baris terakhir blok atau baris tepat sebelum jeda baris paksa disejajarkan saat perataan teks "membenarkan" |
| 159 | textDecoration | Mengatur atau mengembalikan dekorasi teks |
| 160 | textDecorationColor | Mengatur atau mengembalikan warna dekorasi teks |
| 161 | textDecorationLine | Menetapkan atau mengembalikan jenis garis dalam dekorasi teks |
| 162 | textDecorationStyle | Mengatur atau mengembalikan gaya garis dalam dekorasi teks |
| 163 | textIndent | Menyetel atau mengembalikan lekukan baris pertama teks |
| 164 | textJustify | Menyetel atau mengembalikan metode pembenaran yang digunakan saat perataan teks "membenarkan" |
| 165 | textOverflow | Setel atau kembalikan apa yang harus terjadi ketika teks melebihi elemen yang mengandung |
| 166 | textShadow | Mengatur atau mengembalikan efek bayangan dari teks |
| 167 | textTransform | Mengatur atau mengembalikan kapitalisasi teks |
| 168 | top | Mengatur atau mengembalikan posisi teratas dari elemen yang diposisikan |
| 169 | transform | Menerapkan transformasi 2D atau 3D ke elemen |
| 170 | transformOrigin | Menetapkan atau mengembalikan posisi elemen yang diubah |
| 171 | transformStyle | Menyetel atau mengembalikan bagaimana elemen bersarang dirender dalam ruang 3D |
| 172 | transition | Properti singkatan untuk mengatur atau mengembalikan empat properti transisi |
| 173 | transitionProperty | Menyetel atau mengembalikan properti CSS untuk efek transisi |
| 174 | transitionDuration | Menyetel atau mengembalikan berapa detik atau milidetik yang diperlukan efek transisi untuk menyelesaikannya |
| 175 | transitionTimingFunction | Mengatur atau mengembalikan kurva kecepatan dari efek transisi |
| 176 | transitionDelay | Mengatur atau mengembalikan kapan efek transisi akan dimulai |
| 177 | unicodeBidi | Menyetel atau mengembalikan apakah teks harus diganti untuk mendukung banyak bahasa dalam dokumen yang sama |
| 178 | userSelect | Mengatur atau mengembalikan apakah teks suatu elemen dapat dipilih atau tidak |
| 179 | verticalAlign | Menetapkan atau mengembalikan perataan vertikal konten dalam suatu elemen |
| 180 | visibility | Menetapkan atau mengembalikan apakah suatu elemen harus terlihat |
| 181 | whiteSpace | Menyetel atau mengembalikan cara menangani tab, jeda baris, dan spasi dalam teks |
| 182 | width | Menetapkan atau mengembalikan lebar elemen |
| 183 | wordBreak | Menetapkan atau mengembalikan aturan pemecah baris untuk skrip non-CJK |
| 184 | wordSpacing | Mengatur atau mengembalikan jarak antar kata dalam teks |
| 185 | wordWrap | Memungkinkan kata-kata yang panjang dan tidak dapat dipecahkan untuk dipecahkan dan dibungkus ke baris berikutnya |
| 186 | widows | Menetapkan atau mengembalikan jumlah baris minimum untuk elemen yang harus terlihat di bagian atas halaman |
| 187 | z-Index | Menetapkan atau mengembalikan urutan tumpukan elemen yang diposisikan |
