1. Ubah sebagian gaya
Ada tiga jenis: mengubah gaya langsung, mengubah className dan mengubah cssText. Hal yang perlu diperhatikan adalah:
Perhatikan kapitalisasi:
JavaScript sangat peka huruf besar-kecil. ClassName tidak dapat menulis "N" sebagai "n", dan cssText tidak dapat menulis "T" sebagai "t", jika tidak, efeknya tidak dapat dicapai.
Metode panggilan:
Jika Anda mengubah className, deklarasikan kelas di style sheet terlebih dahulu, tetapi jangan ikuti style saat memanggil. Penulisan seperti document.getElementById('obj').style.className="..." salah! Itu hanya dapat ditulis sebagai: document.getElementById('obj').className="..."
Ubah cssText
Namun jika menggunakan cssText harus menambahkan style. Cara penulisan yang benar adalah: document.getElementById('obj').style.cssText=”…”
Saya tidak perlu berbicara tentang mengubah gaya langsung. Ingatlah untuk menuliskan gaya tertentu, seperti
Copy kode kodenya sebagai berikut:
document.getElementById('obj').style.backgroundColor=”#003366″
2. Ubah gaya secara global
Biasanya, kita dapat mencapai peralihan gaya laman web secara real-time dengan mengubah nilai href gaya tautan eksternal, yaitu, "mengubah gaya templat". Saat ini kita perlu memberikan id terlebih dahulu pada target yang perlu diubah, seperti
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
Sangat mudah untuk menelepon, seperti
<span on click="javascript:document.getElementById('css').href = 'ie.css'">Klik saya untuk mengubah gaya</span>
Pemula sering kali tidak tahu cara menulis gaya CSS tertentu dalam JavaScript, dan terkadang persyaratannya berbeda di browser yang berbeda. Misalnya, float ditulis sebagai styleFloat di IE dan cssFloat di FIREFOX, yang memerlukan akumulasi semua orang. Mencari "ccvita javascript" di Google dapat membantu keraguan Anda.
pengetahuan dasar
Biasanya ada tiga cara untuk memanggil style sheet di halaman web.
Yang pertama: Menautkan ke file style sheet eksternal (Menautkan ke Style Sheet)
Anda dapat terlebih dahulu membuat file style sheet eksternal (.css) dan kemudian menggunakan objek link HTML. Contohnya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<kepala>
<title>Judul dokumen</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
Dalam XML, Anda akan menambahkannya di area deklarasi seperti yang ditunjukkan pada contoh berikut:
Copy kode kodenya sebagai berikut:
< ?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
Tipe kedua: Tentukan objek blok gaya internal (Menyematkan Blok Gaya)
Anda dapat menyisipkan a
objek blok. Untuk metode definisi, silakan lihat sintaks style sheet. Contohnya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<html>
<kepala>
<title>Judul dokumen</title>
<gaya tipe="teks/css">
<!--
badan {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; berat font: tebal;
h2 {font: 13pt/15pt "Arial"; berat font: tebal;
p {font: 10pt/12pt "Arial"; warna: hitam}
-->
</gaya>
</kepala>
<tubuh>
</tubuh></html>
Perlu diketahui bahwa menyetel atribut tipe objek gaya ke "teks/css" memungkinkan browser yang tidak mendukung tipe ini mengabaikan lembar gaya.
Tipe ketiga: Definisi sebaris (Inline Styles)
Definisi inline adalah dengan menggunakan atribut style objek dalam markup objek untuk menentukan atribut style sheet yang berlaku padanya. Contohnya adalah sebagai berikut:
Copy kode kodenya sebagai berikut:
<p style="margin-left: 0.5in; margin-right:0.5in">Baris ini telah menambahkan patch luar kiri dan kanan</p><p> </p>