Objek Style HTML DOM

Objet Style

Objet Style mewakili pernyataan gaya yang terpisah.

Properti Objet Style

Properti Deskripsi
alignContent Tetapkan atau kembalikan cara penyesuaian baris di dalam kontainer elastic saat item tidak menggunakan semua ruang yang tersedia.
alignItems Tetapkan atau kembalikan cara penyesuaian item di dalam kontainer elastic.
alignSelf Tetapkan atau kembalikan cara penyesuaian item yang dipilih di dalam kontainer elastic.
animation Singkatan properti semua properti animasi, kecuali properti animationPlayState.
animationDelay Tetapkan atau kembalikan kapan animasi akan mulai.
animationDirection Tetapkan atau kembalikan apakah animasi harus dimainkan balik di dalam cycle alternatif.
animationDuration Tetapkan atau kembalikan berapa detik atau milidetik yang dibutuhkan untuk selesai satu周期 animasi.
animationFillMode Tetapkan atau kembalikan nilai yang digunakan saat animasi diluar masa eksekusi.
animationIterationCount Tetapkan atau kembalikan berapa kali animasi harus dimainkan.
animationName Tetapkan atau kembalikan nama @keyframes animasi.
animationPlayState Tetapkan atau kembalikan apakah animasi sedang berjalan atau berhenti.
animationTimingFunction Tetapkan atau kembalikan laju garis waktu animasi.
background Tetapkan atau kembalikan semua properti latar belakang dalam satu pernyataan.
backgroundAttachment Tetapkan atau kembalikan apakah imej latar belakang tetap atau bergerak bersama halaman.
backgroundClip Tetapkan atau kembalikan kawasan penggambaran latar belakang.
backgroundColor Tetapkan atau kembalikan warna latar belakang elemen.
backgroundImage Tetapkan atau kembalikan imej latar belakang elemen.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition 设置或返回背景图像的起始位置。
Tetapkan atau kembalikan area lokasi gambar latar belakang. backgroundPosition
Tetapkan atau kembalikan posisi awal gambar latar belakang. backgroundRepeat
Tetapkan atau kembalikan bagaimana gambar latar belakang diulang (tiled). backgroundSize
Tetapkan atau kembalikan ukuran gambar latar belakang. backfaceVisibility
Tetapkan atau kembalikan apakah elemen terlihat ketika tidak menghadap ke layar. borderBottom
Tetapkan atau kembalikan semua properti borderBottom dalam satu pernyataan. borderBottomColor
Tetapkan atau kembalikan warna bingkai bawah. borderBottomLeftRadius
Tetapkan atau kembalikan bentuk bingkai sudut kiri bawah. borderBottomRightRadius
Tetapkan atau kembalikan bentuk bingkai sudut kanan bawah. Tetapkan atau kembalikan gaya bingkai bawah.
borderBottomWidth Tetapkan atau kembalikan lebar bingkai bawah.
borderCollapse Tetapkan atau kembalikan apakah bingkai tabel harus digabung menjadi bingkai tunggal.
borderColor Tetapkan atau kembalikan warna bingkai elemen (maksimal empat nilai).
borderImage Sifat singkat untuk tetapkan atau kembalikan semua properti borderImage.
borderImageOutset Tetapkan atau kembalikan jumlah bingkai gambar yang diluar kotak bingkai.
borderImageRepeat Tetapkan atau kembalikan apakah gambar bingkai harus diulang, mengelilingi, atau ditarik.
borderImageSlice Tetapkan atau kembalikan offset dalam arah dalaman bingkai gambar.
borderImageSource Tetapkan atau kembalikan gambar yang digunakan sebagai bingkai.
borderImageWidth Tetapkan atau kembalikan lebar bingkai gambar.
borderLeft Tetapkan atau kembalikan semua properti borderLeft dalam satu pernyataan.
borderLeftColor Tetapkan atau kembalikan warna bingkai kiri.
borderLeftStyle Tetapkan atau kembalikan gaya bingkai kiri.
borderLeftWidth Tetapkan atau kembalikan lebar bingkai kiri.
borderRadius Sifat singkat untuk tetapkan atau kembalikan semua properti borderRadius empat.
borderRight Tetapkan atau kembalikan semua properti borderRight dalam satu pernyataan.
borderRightColor Tetapkan atau kembalikan warna bingkai kanan.
borderRightStyle tetapkan atau kembalikan gaya garis bingkai kanan.
borderRightWidth tetapkan atau kembalikan lebar garis bingkai kanan.
borderSpacing tetapkan atau kembalikan ruang antara sel tabel.
borderStyle tetapkan atau kembalikan gaya garis bingkai elemen (maksimal empat nilai).
borderTop tetapkan atau kembalikan semua properti borderTop dalam satu deklarasi.
borderTopColor tetapkan atau kembalikan warna garis bingkai atas.
borderTopLeftRadius tetapkan atau kembalikan bentuk garis bingkai kiri atas.
borderTopRightRadius tetapkan atau kembalikan bentuk garis bingkai kanan atas.
borderTopStyle tetapkan atau kembalikan gaya garis bingkai atas.
borderTopWidth tetapkan atau kembalikan lebar garis bingkai atas.
borderWidth tetapkan atau kembalikan lebar garis bingkai elemen (maksimal empat nilai).
bottom tetapkan atau kembalikan posisi bawah elemen yang ditempatkan.
boxDecorationBreak tetapkan atau kembalikan perilaku latar belakang dan garis bingkai elemen saat halaman dipaging, atau perilaku untuk elemen dalam baris saat ganti baris.
boxShadow tambahkan satu atau beberapa bayangan ke bingkai (box).
boxSizing memungkinkan Anda mendefinisikan beberapa elemen untuk disesuaikan dengan suatu area.
captionSide tetapkan atau kembalikan posisi judul tabel.
caretColor tetapkan atau kembalikan warna isikan/penanda tangan.
clear tetapkan atau kembalikan posisi elemen berhadapan dengan objek yang menggerakkan.
clip tetapkan atau kembalikan bagian elemen yang dapat terlihat elemen yang ditempatkan.
color tetapkan atau kembalikan warna teks.
columnCount tetapkan atau kembalikan berapa banyak kolom yang seharusnya dipecahkan elemen.
columnFill tetapkan atau kembalikan cara pengisi kolom.
columnGap tetapkan atau kembalikan jarak antara kolom.
columnRule digunakan untuk tetapkan atau kembalikan properti singkat untuk semua properti columnRule.
columnRuleColor tetapkan atau kembalikan warna aturan antara kolom.
columnRuleStyle tetapkan atau kembalikan gaya aturan antara kolom.
columnRuleWidth tetapkan atau kembalikan lebar aturan antara kolom.
columns digunakan untuk tetapkan atau kembalikan properti singkat untuk columnWidth dan columnCount.
columnSpan tetapkan atau kembalikan berapa banyak kolom yang seharusnya dihubungkan elemen.
columnWidth tetapkan atau kembalikan lebar kolom.
content Used with :before and :after pseudo-elements to insert generated content.
counterIncrement Increase one or more counters.
counterReset Create or reset one or more counters.
cursor Set or return the cursor type displayed by the mouse pointer.
direction Set or return the text direction.
display Set or return the display type of the element.
emptyCells Set or return whether the border and background of the empty cell should be displayed.
filter Set or return the image filter (visual effects such as blur and saturation).
flex Set or return the length of the item, relative to the rest of the part.
flexBasis Set or return the initial length of the elastic item.
flexDirection Set or return the direction of the elastic item.
flexFlow Abbreviated properties of flexDirection and flexWrap.
flexGrow Set or return the growth amount of the item relative to other items.
flexShrink Set or return the shrinkage method of the item relative to other items.
flexWrap Set or return whether the elastic item should be wrapped.
cssFloat Set or return the horizontal alignment method of the element.
font Set or return font properties in a single declaration.
fontFamily Set or return the font family of the text.
fontSize Set or return the font size of the text.
fontStyle Set or return whether the font style is normal, italic, or oblique.
fontVariant Set or return whether the font should be displayed in small capitals.
fontWeight Set or return the thickness of the font.
fontSizeAdjust Maintain the readability of the text when font fallback occurs.
fontStretch Choose the stretching deformation method from the character set when font fallback occurs.
hangingPunctuation Specify whether punctuation marks can be placed outside the line box.
height Set or return the height of the element.
hyphens Set how to split words to improve the layout of the paragraph.
icon Allow the author to use iconic equivalents to set the style of the element.
imageOrientation Specify the right or clockwise rotation direction applied to the image by the user agent.
isolation Define whether the element must create new stacked content.
justifyContent Set or return the alignment method between items within an elastic container when the item does not use all available space.
left Set or return the left position of the located element.
letterSpacing Tetapkan atau kembalikan ruang antar karakter teks.
lineHeight Tetapkan atau kembalikan jarak antar baris teks.
listStyle Tetapkan atau kembalikan gaya daftar dalam satu pernyataan.
listStyleImage Tetapkan atau kembalikan gambar sebagai tanda tanda daftar.
listStylePosition Tetapkan atau kembalikan posisi tanda tanda daftar.
listStyleType Tetapkan atau kembalikan jenis tanda tanda daftar.
margin Tetapkan atau kembalikan margin elemen (tidak lebih dari empat nilai).
marginBottom Tetapkan atau kembalikan margin bawah elemen.
marginLeft Tetapkan atau kembalikan margin kiri elemen.
marginRight Tetapkan atau kembalikan margin kanan elemen.
marginTop Tetapkan atau kembalikan margin atas elemen.
maxHeight Tetapkan atau kembalikan tinggi maksimum elemen.
maxWidth Tetapkan atau kembalikan lebar maksimum elemen.
minHeight Tetapkan atau kembalikan tinggi minimum elemen.
minWidth Tetapkan atau kembalikan lebar minimum elemen.
navDown Tetapkan atau kembalikan posisi navigasi saat digunakan tombol navigasi panah bawah.
navIndex Tetapkan atau kembalikan urutan loncatan elemen.
navLeft Tetapkan atau kembalikan posisi navigasi saat digunakan tombol navigasi panah kiri.
navRight Tetapkan atau kembalikan posisi navigasi saat digunakan tombol navigasi panah kanan.
navUp Tetapkan atau kembalikan posisi navigasi saat digunakan tombol navigasi panah atas.
objectFit Tentukan bagaimana konten elemen pengganti harus disesuaikan dengan kotak yang dibangun oleh tinggi dan lebar yang digunakan.
objectPosition Tentukan cara penyesuaian elemen yang digantikan di dalam kotaknya.
opacity Tetapkan atau kembalikan tingkat kecerahan elemen.
order Tetapkan atau kembalikan urutan item elastis berbanding dengan item lain.
orphans Tetapkan atau kembalikan jumlah baris minimum yang harus tinggal di dasar halaman saat terjadi halaman dalam elemen.
outline Tetapkan atau kembalikan semua properti outline dalam satu pernyataan.
outlineColor Tetapkan atau kembalikan warna garis luar elemen.
outlineOffset Jauhkan garis luar dan lukisnya ke luar pinggir bingkai.
outlineStyle Tetapkan atau kembalikan gaya garis luar elemen.
outlineWidth Tetapkan atau kembalikan lebar garis luar elemen.
overflow Tetapkan atau kembalikan bagaimana memproses konten yang muncul di luar kotak elemen.
overflowX Tetapkan bagaimana memproses permukaan kiri/kanan konten, jika ia keluar area konten elemen.
overflowY Tentukan bagaimana menghadapi garis atas/bawah konten, jika ia melimpah ke area konten elemen.
padding Tetapkan atau kembalikan padding dalam elemen (maksimal empat nilai dapat disetel).
paddingBottom Tetapkan atau kembalikan padding bawah elemen.
paddingLeft Tetapkan atau kembalikan padding kiri elemen.
paddingRight Tetapkan atau kembalikan padding kanan elemen.
paddingTop Tetapkan atau kembalikan padding atas elemen.
pageBreakAfter Tetapkan atau kembalikan perilaku halaman setelah elemen.
pageBreakBefore Tetapkan atau kembalikan perilaku halaman sebelum elemen.
pageBreakInside Tetapkan atau kembalikan perilaku halaman untuk elemen.
perspective Tetapkan atau kembalikan perspektif untuk melihat elemen 3D.
perspectiveOrigin Tetapkan atau kembalikan posisi dasar elemen 3D.
position Tetapkan atau kembalikan jenis metode penempatan yang digunakan untuk elemen (statik, relatif, absolut atau tetap).
quotes Tetapkan atau kembalikan jenis tanda kutip yang digunakan untuk kutipan yang disisipkan.
resize Tetapkan atau kembalikan apakah elemen dapat diukur ukur pengguna.
right Tetapkan atau kembalikan posisi kanan elemen yang ditetapkan.
scrollBehavior Tentukan apakah ada efek animasi penempatan yang lancar saat pengguna mengklik tautan di dalam kotak yang dapat digerakkan, bukannya melompat langsung.
tableLayout Tetapkan atau kembalikan cara pengaturan tata letak sel, baris dan kolom tabel.
tabSize Tetapkan atau kembalikan panjang tab.
textAlign Tetapkan atau kembalikan cara pengecualian teks horizontal.
textAlignLast Saat text-align diatur ke "justify", tetapkan atau kembalikan bagaimana baris terakhir blok atau baris yang dipaksa untuk ganti baris diatur untuk menyesuaikan.
textDecoration Tetapkan atau kembalikan dekoration teks.
textDecorationColor Tetapkan atau kembalikan warna dekoration teks.
textDecorationLine Tetapkan atau kembalikan tipe baris di dekoration teks.
textDecorationStyle Tetapkan atau kembalikan gaya garis di dekoration teks.
textIndent Tetapkan atau kembalikan indent pertama baris teks.
textJustify Tetapkan atau kembalikan metode pengecualian yang digunakan saat text-align diatur ke "justify".
textOverflow Tetapkan atau kembalikan apa yang terjadi apabila teks melimpah ke dalam elemen yang disertai.
textShadow Tetapkan atau kembalikan kesan bayangan teks.
textTransform Tetapkan atau kembalikan saiz tulisan.
top Tetapkan atau kembalikan kedudukan atas elemen yang ditentukan.
transform Menerapkan transisi 2D atau 3D kepada elemen.
transformOrigin Tetapkan atau kembalikan kedudukan elemen yang ditransformasi.
transformStyle Tetapkan atau kembalikan cara pengerendahan elemen yang ditapak di ruang 3D.
transition Digunakan untuk tetapkan atau kembalikan singkatan empat sifat transisi.
transitionProperty Tetapkan atau kembalikan sifat CSS kesan transit.
transitionDuration Tetapkan atau kembalikan masa yang diperlukan untuk kesan transit selesai.
transitionTimingFunction Tetapkan atau kembalikan garisan kelajuan kesan transit.
transitionDelay Tetapkan atau kembalikan bila kesan transit harus bermula.
unicodeBidi Tetapkan atau kembalikan sama ada teks harus dijalankan untuk mendukung pelbagai bahasa di dokumen yang sama.
userSelect Tetapkan atau kembalikan sama ada teks elemen dapat dipilih atau bukan.
verticalAlign Tetapkan atau kembalikan cara penjajaran kandungan vertikal elemen.
visibility Tetapkan atau kembalikan sama ada elemen adalah boleh dilihat atau bukan.
whiteSpace Tetapkan atau kembalikan cara pengelolaan tab, baris dan spasi dalam teks.
width Tetapkan atau kembalikan lebar elemen.
wordBreak Tetapkan atau kembalikan atur cara pemecahan baris untuk tulisan bukan CJK.
wordSpacing Tetapkan atau kembalikan jarak kata dalam teks.
wordWrap Izinkan kata panjang, yang tak dapat diputus, untuk diputus dan dialihkan ke baris berikutnya.
widows Tetapkan atau kembalikan jumlah baris minimum yang harus terlihat di atas halaman untuk elemen yang harus terlihat di atas halaman.
zIndex Tetapkan atau kembalikan susunan tumpuan elemen.

Akses Objek Gaya

Objek Gaya boleh diakses dari bahagian head dokumen atau elemen HTML tertentu.

contoh 1

Akses Objek Gaya dari bahagian head dokumen:

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

Cuba sendiri

contoh 2

Akses Objek Gaya yang ditentukan elemen:

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

Cuba sendiri

Membuat Objek Style

contoh 1

Anda boleh gunakan kaedah document.createElement() untuk membuat elemen <style>:

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

Cuba sendiri

contoh 2

Anda juga boleh menetapkan atribut gaya bagi elemen yang ada:

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

Cuba sendiri

Halaman yang berhubungan

Panduan HTML:HTML CSS

Panduan CSS:Panduan CSS

Panduan HTML:HTML <style> pelengkap

Panduan CSS:Atribut CSS