Objek Style HTML DOM

Objek Style

Objek Style mewakili deklarasi gaya yang terpisah.

Properti Objek Style

Properti Deskripsi
alignContent Atur atau kembalikan cara pengaturan garis antar baris dalam kontainer elasthan, ketika item tidak memakai semua ruang yang tersedia.
alignItems Atur atau kembalikan cara pengaturan posisi item dalam kontainer elasthan.
alignSelf Atur atau kembalikan cara pengaturan posisi item dalam kontainer elasthan.
animation Properti singkat untuk semua properti animasi, kecuali animationPlayState.
animationDelay Atur atau kembalikan kapan animasi akan mulai.
animationDirection Atur atau kembalikan apakah animasi harus memutar balik dalam cycle alternatif.
animationDuration Atur atau kembalikan detik atau milidetik yang dibutuhkan untuk menghabiskan satu周期 animasi.
animationFillMode Atur atau kembalikan nilai yang digunakan selama masa eksekusi animasi.
animationIterationCount Atur atau kembalikan berapa kali animasi harus diputar.
animationName Atur atau kembalikan nama @keyframes animasi.
animationPlayState Atur atau kembalikan apakah animasi sedang berjalan atau dihentikan.
animationTimingFunction Atur atau kembalikan garis waktu animasi.
background Atur atau kembalikan semua properti latar belakang dalam satu deklarasi.
backgroundAttachment Atur atau kembalikan apakah gambar latar belakang tetap atau bergerak dengan halaman.
backgroundClip Atur atau kembalikan area pengerisan latar belakang.
backgroundColor Atur atau kembalikan warna latar belakang elemen.
backgroundImage Atur atau kembalikan gambar latar belakang elemen.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition Atur atau kembalikan area lokasi gambar latar belakang.
backgroundPosition Atur atau kembalikan posisi awal gambar latar belakang.
backgroundRepeat Atur atau kembalikan bagaimana gambar latar belakang harus diulang (tiled).
backgroundSize Atur atau kembalikan ukuran gambar latar belakang.
backfaceVisibility Atur atau kembalikan apakah elemen dapat terlihat saat tidak menghadap ke layar.
borderBottom Atur atau kembalikan semua properti borderBottom dalam satu deklarasi.
borderBottomColor Atur atau kembalikan warna bingkai bawah.
borderBottomLeftRadius Atur atau kembalikan bentuk bingkai sudut kiri bawah.
borderBottomRightRadius Atur atau kembalikan bentuk bingkai sudut kanan bawah.
borderBottomStyle Atur atau kembalikan gaya bingkai bawah.
borderBottomWidth Atur atau kembalikan lebar bingkai bawah.
borderCollapse Atur atau kembalikan apakah bingkai tabel harus digabungkan menjadi bingkai tunggal.
borderColor Atur atau kembalikan warna bingkai elemen (maksimal empat nilai dapat diset).
borderImage Properti singkat untuk atur atau kembalikan semua properti borderImage.
borderImageOutset Atur atau kembalikan jumlah yang dilewati area gambar bingkai melebihi kotak bingkai.
borderImageRepeat Atur atau kembalikan apakah gambar bingkai harus diulang, mengelilingi, atau ditarik.
borderImageSlice Atur atau kembalikan penurunan gambar bingkai ke dalam.
borderImageSource Atur atau kembalikan gambar yang digunakan sebagai bingkai.
borderImageWidth Atur atau kembalikan lebar bingkai gambar.
borderLeft Atur atau kembalikan semua properti borderLeft dalam satu deklarasi.
borderLeftColor Atur atau kembalikan warna bingkai kiri.
borderLeftStyle Atur atau kembalikan gaya bingkai kiri.
borderLeftWidth Atur atau kembalikan lebar bingkai kiri.
borderRadius Properti singkat untuk atur atau kembalikan semua empat properti borderRadius.
borderRight Atur atau kembalikan semua properti borderRight dalam satu deklarasi.
borderRightColor Atur atau kembalikan warna bingkai kanan.
borderRightStyle 设置或返回右边框的样式。
borderRightStyle atur atau kembalikan gaya bingkai kanan.
borderRightWidth atur atau kembalikan lebar bingkai kanan.
borderSpacing atur atau kembalikan ruang antara sel tabel.
borderStyle atur atau kembalikan gaya bingkai elemen (maksimal empat nilai dapat diset).
borderTop atur atau kembalikan semua properti borderTop dalam satu deklarasi.
borderTopColor atur atau kembalikan warna bingkai atas.
borderTopLeftRadius atur atau kembalikan bentuk bingkai kiri atas.
borderTopRightRadius atur atau kembalikan gaya bingkai atas.
borderTopWidth atur atau kembalikan lebar bingkai atas.
borderWidth atur atau kembalikan lebar bingkai elemen (maksimal empat nilai dapat diset).
bottom atur atau kembalikan posisi bawah elemen yang ditempatkan.
boxDecorationBreak atur atau kembalikan perilaku latar belakang dan garis bingkai elemen saat halaman dipaging, atau perilaku baris untuk elemen rongga saat dihaluskan.
boxShadow tambahkan bayangan ke bingkai (box).
boxSizing memungkinkan Anda mendefinisikan beberapa elemen untuk menyesuaikan dengan suatu area.
captionSide atur atau kembalikan posisi judul tabel.
caretColor atur atau kembalikan warna tanda penanda/ekor kursor.
clear atur atau kembalikan posisi elemen relatif terhadap objek yang mengambang.
clip atur atau kembalikan bagian elemen yang dapat terlihat posisi elemen yang ditempatkan.
color atur atau kembalikan warna teks.
columnCount atur atau kembalikan berapa banyak kolom elemen harus dibagi.
columnFill atur atau kembalikan cara pengisi kolom.
columnGap atur atau kembalikan jarak antara kolom.
columnRule properti singkat untuk atur atau kembalikan semua properti columnRule.
columnRuleColor atur atau kembalikan warna aturan antara kolom.
columnRuleStyle atur atau kembalikan gaya aturan antara kolom.
columnRuleWidth atur atau kembalikan lebar aturan antara kolom.
columns properti singkat untuk atur atau kembalikan columnWidth dan columnCount.
columnSpan atur atau kembalikan berapa banyak kolom elemen harus melintasi.
columnWidth atur atau kembalikan lebar kolom.
content Digunakan bersama dengan pseudo-element :before dan :after, memasukkan konten yang dihasilkan.
counterIncrement Tingkatkan satu atau beberapa pengebom.
counterReset Buat atau atur ulang satu atau beberapa pengebom.
cursor Atur atau kembalikan tipe kursor yang muncul saat menunjuk mouse.
direction Atur atau kembalikan arah teks.
display Atur atau kembalikan tipe tampilan elemen.
emptyCells Atur atau kembalikan apakah garis tepi dan latar belakang seluler yang kosong harus ditampilkan.
filter Atur atau kembalikan filter gambar (efek visual seperti blur dan kepadatan).
flex Atur atau kembalikan panjang item, berbanding dengan bagian lainnya.
flexBasis Atur atau kembalikan panjang awal item elasti.
flexDirection Atur atau kembalikan arah item elasti.
flexFlow Atribut singkat untuk flexDirection dan flexWrap.
flexGrow Atur atau kembalikan besarnya peningkatan item untuk lainnya.
flexShrink Atur atau kembalikan cara pengekontrakan item untuk lainnya.
flexWrap Atur atau kembalikan apakah item elasti harus dialihkan baris.
cssFloat Atur atau kembalikan gaya penarikan horizontal elemen.
font Atur atau kembalikan properti font dalam satu pernyataan.
fontFamily Atur atau kembalikan keluarga font teks.
fontSize Atur atau kembalikan ukuran font teks.
fontStyle Atur atau kembalikan gaya font adalah normal, italic, atau oblique.
fontVariant Atur atau kembalikan apakah font harus ditampilkan dalam huruf kecil kapital.
fontWeight Atur atau kembalikan ketebalan font.
fontSizeAdjust Mengutamakan kebacaan teks saat terjadi penurunan font.
fontStretch Pilih gaya pengekoran terpasang dari serupa tulisan.
hangingPunctuation Tentukan apakah tanda baca dapat ditempatkan di luar boks baris.
height Atur atau kembalikan tinggi elemen.
hyphens Atur bagaimana kata dibagi untuk memperbaiki tata letak paragraf.
icon Memungkinkan penulis untuk menggunakan ekvivalen ikon untuk menata gaya elemen.
imageOrientation Tentukan penarikan kanan atau penarikan sebelah kanan untuk penggunaan agensi terhadap gambar.
isolation Tentukan apakah elemen harus membuat konten penyangga baru.
justifyContent Atur atau kembalikan gaya penyejajaran antara item di dalam kontainer yang elasti saat item belum menggunakan semua ruang yang tersedia.
left Atur atau kembalikan posisi kiri elemen yang ditempatkan.
letterSpacing Atur atau kembalikan ruang antara karakter dalam teks.
lineHeight Atur atau kembalikan jarak antar baris teks.
listStyle Atur atau kembalikan gaya daftar dalam satu deklarasi.
listStyleImage Atur atau kembalikan gambar sebagai tanda daftar item.
listStylePosition Atur atau kembalikan posisi tanda daftar item.
listStyleType Atur atau kembalikan jenis tanda daftar item.
margin Atur atau kembalikan margin elemen (tidak lebih dari empat nilai).
marginBottom Atur atau kembalikan margin bawah elemen.
marginLeft Atur atau kembalikan margin kiri elemen.
marginRight Atur atau kembalikan margin kanan elemen.
marginTop Atur atau kembalikan margin atas elemen.
maxHeight Atur atau kembalikan tinggi maksimum elemen.
maxWidth Atur atau kembalikan lebar maksimum elemen.
minHeight Atur atau kembalikan tinggi minimum elemen.
minWidth Atur atau kembalikan lebar minimum elemen.
navDown Atur atau kembalikan posisi navigasi saat digunakan tombol panah navigasi ke bawah.
navIndex Atur atau kembalikan urutan navigasi elemen.
navLeft Atur atau kembalikan posisi navigasi saat digunakan tombol panah navigasi ke kiri.
navRight Atur atau kembalikan posisi navigasi saat digunakan tombol panah navigasi ke kanan.
navUp Atur atau kembalikan posisi navigasi saat digunakan tombol panah navigasi ke atas.
objectFit Tentukan bagaimana konten elemen pengganti harus disesuaikan dengan ketinggian dan lebar kotak yang digunakan.
objectPosition Tentukan cara penyesuaian elemen yang digantikan di dalam kotaknya.
opacity Atur atau kembalikan tingkat kecerahan elemen.
order Atur atau kembalikan urutan item elasti yang berbanding dengan item lain.
orphans Tentukan jumlah baris minimum yang harus tinggal di bawah halaman bawah saat halaman internal terjadi.
outline Atur atau kembalikan semua properti outline dalam satu deklarasi.
outlineColor Atur atau kembalikan warna kontur sekeliling elemen.
outlineOffset Pindahkan kontur ke luar batas bingkai.
outlineStyle Atur atau kembalikan gaya kontur sekeliling elemen.
outlineWidth Atur atau kembalikan lebar kontur sekeliling elemen.
overflow Atur atau kembalikan bagaimana mengatur konten yang muncul di luar kotak elemen.
overflowX Tentukan bagaimana mengatur margin kiri/kanan konten, jika ia keluar dari area konten elemen.
overflowY Tentukan bagaimana mengatur bagian atas/bawah konten, jika ia keluar area konten elemen.
padding Atur atau kembalikan jarak dalam elemen (dapat diset maksimal empat nilai).
paddingBottom Atur atau kembalikan jarak bawah dalam elemen.
paddingLeft Atur atau kembalikan jarak kiri dalam elemen.
paddingRight Atur atau kembalikan jarak kanan dalam elemen.
paddingTop Atur atau kembalikan jarak bawah dalam elemen.
pageBreakAfter Atur atau kembalikan perilaku halaman setelah elemen.
pageBreakBefore Atur atau kembalikan perilaku halaman sebelum elemen.
pageBreakInside Atur atau kembalikan perilaku halaman untuk elemen.
perspective Atur atau kembalikan sudut pandang untuk melihat elemen 3D.
perspectiveOrigin Atur atau kembalikan posisi dasar elemen 3D.
position Atur atau kembalikan jenis metode penempatan yang digunakan untuk elemen (statik, relatif, absolut, atau tetap).
quotes Atur atau kembalikan jenis tanda kutip yang digunakan untuk kutipan yang disisipkan.
resize Atur atau kembalikan apakah elemen dapat diukur ukur pengguna.
right Atur atau kembalikan posisi kanan elemen yang ditempatkan.
scrollBehavior Tentukan apakah ada efek animasi penempatan yang lancar saat pengguna mengklik tautan di dalam kotak geser, bukannya melompat langsung.
tableLayout Atur atau kembalikan cara tata letak sel, baris, dan kolom tabel.
tabSize Atur atau kembalikan panjang tab.
textAlign Atur atau kembalikan cara penjajaran teks secara horizontal.
textAlignLast Ketika text-align adalah "justify", atur atau kembalikan bagaimana baris terakhir blok atau baris yang dipaksa untuk berpindah baris sebelumnya diatur.
textDecoration Atur atau kembalikan dekoration teks.
textDecorationColor Atur atau kembalikan warna dekoration teks.
textDecorationLine Atur atau kembalikan tipe baris di dekoration teks.
textDecorationStyle Atur atau kembalikan gaya garis di dekoration teks.
textIndent Atur atau kembalikan indent pertama kalinya teks.
textJustify Atur atau kembalikan metode penjajaran yang digunakan saat text-align adalah "justify".
textOverflow Atur atau kembalikan situasi yang terjadi saat teks keluar batas elemen yang disertai.
textShadow Atur atau kembalikan efek bayangan teks.
textTransform Atur atau kembalikan ukuran huruf teks.
top Atur atau kembalikan posisi atas elemen yang dialihkan.
transform Menerapkan transformasi 2D atau 3D pada elemen.
transformOrigin Atur atau kembalikan posisi elemen yang diubah.
transformStyle Atur atau kembalikan cara elemen yang bersarang di ruang 3D.
transition Digunakan untuk mengatur atau kembalikan aturan empat properti transisi dalam singkatan.
transitionProperty Atur atau kembalikan properti CSS yang digunakan dalam efek transisi.
transitionDuration Atur atau kembalikan detik atau milidetik yang diperlukan untuk efek transisi selesai.
transitionTimingFunction Atur atau kembalikan garis waktu efek transisi.
transitionDelay Atur atau kembalikan kapan efek transisi akan mulai.
unicodeBidi Atur atau kembalikan apakah teks harus diambil untuk mendukung berbagai bahasa di dokumen yang sama.
userSelect Atur atau kembalikan apakah teks elemen dapat dipilih.
verticalAlign Atur atau kembalikan gaya penataan vertikal konten elemen.
visibility Atur atau kembalikan apakah elemen dapat terlihat.
whiteSpace Atur atau kembalikan cara menangani tab, baris garis, dan spasi di teks.
width Atur atau kembalikan lebar elemen.
wordBreak Atur atau kembalikan aturan garapan baris untuk non CJK script.
wordSpacing Atur atau kembalikan jarak kata dalam teks.
wordWrap Memungkinkan kata yang panjang dan tak dapat diputus untuk dipecahkan dan berubah baris ke baris berikutnya.
widows Atur atau kembalikan jumlah baris minimum yang harus terlihat di atas halaman untuk elemen yang harus terlihat di atas halaman.
zIndex Atur atau kembalikan urutan piling elemen yang dialihkan.

Akses Objek Style

Objek Style dapat diakses dari bagian head dokumen atau elemen HTML khusus.

contoh 1

Akses objek gaya dari bagian head dokumen:

var x = document.getElementsByTagName("STYLE");

Coba Sendiri

contoh 2

Akses objek gaya elemen yang ditentukan:

var x = document.getElementById("myH1").style;

Coba Sendiri

Membuat objek Style

contoh 1

Anda dapat menggunakan metode document.createElement() untuk membuat elemen <style>:

var x = document.createElement("STYLE");

Coba Sendiri

contoh 2

Anda juga dapat menetapkan atribut gaya elemen yang ada:

document.getElementById("myH1").style.color = "red";

Coba Sendiri

Halaman Terkait

Panduan HTML:HTML CSS

Panduan CSS:Panduan CSS

Panduan Referensi HTML:HTML <style> Tag

Panduan Referensi CSS:Atribut CSS