Ada empat cara menggunakan CSS untuk mengontrol halaman, yaitu gaya sebaris (inline style), gaya inline, gaya link, dan gaya impor.
Gaya sebaris (inline style) ditulis dalam atribut style pada tag html, seperti <div></div>
Gaya sebaris ditulis dalam tag gaya, seperti <style type="text/css">div{width:100px height:100px}</style>
Jenis tautannya adalah menggunakan tag tautan untuk memasukkan file css, seperti <link href="test.css" type="text/css" rel="stylesheet" />
Metode impornya adalah menggunakan import untuk memasukkan file css, seperti @import url("test.css")
Jika Anda ingin menggunakan JavaScript untuk mendapatkan informasi gaya suatu elemen, hal pertama yang terlintas dalam pikiran adalah atribut gaya elemen tersebut. Namun, atribut style suatu elemen hanya mewakili gaya inline dari elemen tersebut. Jika sebagian informasi gaya suatu elemen ditulis dalam gaya inline dan sebagian lagi ditulis dalam file CSS eksternal, informasi gaya lengkap dari elemen tersebut tidak dapat. diperoleh melalui atribut style. Oleh karena itu, Anda perlu menggunakan gaya elemen yang dihitung untuk mendapatkan informasi gaya elemen tersebut.
Gunakan metode getComputedStyle pada objek window untuk mendapatkan gaya terhitung suatu elemen. Metode ini memiliki 2 parameter. Parameter pertama adalah elemen yang gaya terhitungnya ingin diperoleh. kelas (seperti: sebelum,:setelah), kedua parameter tersebut diperlukan.
Mari kita beri contoh
<gaya tipe="teks/css">
#testDiv{
batas:1px merah pekat;
lebar: 100 piksel;
tinggi: 100 piksel;
warna: merah;
}
</gaya>
<div id="testDiv"></div>
var testDiv = dokumen.getElementById("testDiv");
var computerStyle = window.getComputedStyle(testDiv, "");
var lebar = gaya dihitung.lebar; //100 piksel
var tinggi = gaya komputer.tinggi; //100 piksel
var warna = gaya komputer.warna; //rgb(255, 0, 0)
[/kode]
Catatan: Atribut warna yang diperoleh semuanya dikembalikan dalam format rgb(#,#,#).
Saat ini, jika Anda menggunakan testDiv.style untuk mendapatkan informasi gaya, testDiv.style.width pasti akan kosong.
Metode getComputedStyle tidak diterapkan di IE8 dan versi sebelumnya, tetapi setiap elemen di IE memiliki properti currentStyle sendiri.
Jadi, mari kita ambil gambaran umum
Copy kode kodenya sebagai berikut:
var testDiv = dokumen.getElementById("testDiv");
var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;
var lebar = styleInfo.lebar; //100 piksel;
var tinggi = styleInfo.tinggi; //100 piksel;
var warna = styleInfo.warna; // rgb(255, 0, 0)
Terakhir, harap perhatikan bahwa gaya terhitung suatu elemen bersifat baca-saja. Jika Anda ingin mengatur gaya suatu elemen, Anda harus menggunakan atribut gaya elemen tersebut (inilah tujuan sebenarnya dari atribut gaya elemen tersebut) .