Copy kode kodenya sebagai berikut:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<judul></judul>
<gaya tipe="teks/css">
.hari
{
warna latar:Putih;
}
.malam
{
warna latar belakang: Hitam
}
</gaya>
<skrip bahasa="javascript" type="teks/javascript">
fungsi operStyle() {
var divObj = dokumen.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "hari") {
divObj.className = "malam";
btnObj.value = "Nyalakan lampu";
} kalau tidak {
divObj.className = "hari";
btnObj.value = "Matikan lampu";
}
}
//Batch memodifikasi atribut gaya div, yang terdiri dari beberapa gaya
//Metode 1:
fungsi metodeSatu() {
var divObj = dokumen.getElementById("divTest");
divObj.style.backgroundColor = "biru";
divObj.style.border = "merah solid 1px";
divObj.style.width = "300 piksel";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "tengah";
}
//Metode 2:
metode fungsiDua() {
var divObj = dokumen.getElementById("divTest");
divObj.style.cssText = "warna latar:Biru; batas:solid 1px merah; lebar:300px; tinggi:200px; posisi latar:tengah";
}
</skrip>
</kepala>
<tubuh>
<form id="form1" runat="server">
<div id="divKonten">
<font color="red">Saya seorang div, bah bah bah! </font>
</div>
<input type="button" value="Matikan lampu" id="btnCommit" onclick="operStyle();" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<jam />
<h1>Ubah gaya divTest dan operasikan beberapa atribut</h1>
<div id="tes div" >
<font color="red">Ubah gaya divTest</font>
</div>
<input type="button" value="Ubah gaya divTest" onclick="methodTwo()" />
</bentuk>
</tubuh>
</html>
Saat kami menggunakan js untuk menulis gaya css, kami biasanya menggunakan dua metode berikut:
Secara umum, ketika kita menggunakan js untuk mengatur gaya suatu objek elemen, kita akan menggunakan formulir ini:
Copy kode kodenya sebagai berikut:
var elemen= dokumen.getElementById("id");
elemen.gaya.lebar=”20 piksel”;
elemen.gaya.tinggi=”20px”;
element.style.border=”merah solid 1px”;
Namun, metode di atas memiliki kelemahan. Jika ada lebih banyak gaya, akan ada banyak kode; dan mengganti gaya objek melalui JS adalah proses umum untuk menghancurkan gaya asli dan membangunnya kembali menambah beban browser.
Ada metode cssText di js:
Sintaksnya adalah: obj.style.cssText("style");
Kita dapat memodifikasi kode di atas menjadi:
Copy kode kodenya sebagai berikut:
element.style.cssText=”lebar:20px;tinggi:20px;batas:solid 1px merah;”;
Metode penulisan ini dapat mencoba menghindari beberapa perubahan posisi halaman dan meningkatkan kinerja halaman.