คัดลอกรหัสรหัสดังต่อไปนี้:
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว runat="เซิร์ฟเวอร์">
<title></title>
<style type="text/css">
.วัน
-
สีพื้นหลัง:สีขาว;
-
.กลางคืน
-
สีพื้นหลัง:สีดำ
-
</สไตล์>
<script language="javascript" type="text/javascript">
ฟังก์ชั่น operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
ถ้า (divObj.className == "วัน") {
divObj.className = "กลางคืน";
btnObj.value = "เปิดไฟ";
} อื่น {
divObj.className = "วัน";
btnObj.value = "ปิดไฟ";
-
-
//Batch แก้ไขแอตทริบิวต์สไตล์ของ div ซึ่งประกอบด้วยหลายสไตล์
//วิธีที่ 1:
ฟังก์ชั่น methodOne() {
var divObj = document.getElementById("divTest");
divObj.style.พื้นหลังสี = "สีน้ำเงิน";
divObj.style.border = "ทึบ 1px สีแดง";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.พื้นหลังPosition = "ศูนย์กลาง";
-
//วิธีที่ 2:
ฟังก์ชั่น methodTwo() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "สีพื้นหลัง:สีน้ำเงิน; เส้นขอบ:ทึบ 1px สีแดง; ความกว้าง:300px; ความสูง:200px; ตำแหน่งพื้นหลัง:กึ่งกลาง";
-
</สคริปต์>
</หัว>
<ร่างกาย>
<form id="form1" runat="server">
<div id="divContent">
<font color="red">ฉันเป็น div ฮ่าฮ่าฮ่า! </แบบอักษร>
</div>
<input type="button" value="ปิดไฟ" id="btnCommit" onclick="operStyle(); />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<ชม. />
<h1>ปรับเปลี่ยนรูปแบบของ divTest และดำเนินการหลายแอตทริบิวต์</h1>
<div id="divTest">
<font color="red">ปรับเปลี่ยนรูปแบบของ divTest</font>
</div>
<input type="button" value="ปรับเปลี่ยนรูปแบบของ divTest" onclick="methodTwo()" />
</แบบฟอร์ม>
</ร่างกาย>
</html>
เมื่อเราใช้ js เพื่อเขียนสไตล์ css เรามักจะใช้สองวิธีต่อไปนี้:
โดยทั่วไป เมื่อเราใช้ js เพื่อกำหนดรูปแบบของวัตถุองค์ประกอบ เราจะใช้แบบฟอร์มนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
องค์ประกอบ var= document.getElementById("id");
element.style.width=”20px”;
element.style.height=”20px”;
element.style.border=”ทึบ 1px สีแดง”;
อย่างไรก็ตาม วิธีการข้างต้นมีข้อเสีย หากมี Style มากกว่านี้ ก็จะมี Code จำนวนมาก และการเอาชนะ Style ของ Object ผ่านทาง JS ถือเป็นกระบวนการทั่วไปในการทำลาย Style ดั้งเดิมและสร้างมันขึ้นมาใหม่ เพิ่มภาระของเบราว์เซอร์
มีวิธี cssText ใน js:
ไวยากรณ์คือ: obj.style.cssText("style");
เราสามารถแก้ไขโค้ดด้านบนเป็น:
คัดลอกรหัสรหัสดังต่อไปนี้:
element.style.cssText=”width:20px;height:20px;border:solid 1px สีแดง;”;
วิธีการเขียนนี้สามารถพยายามหลีกเลี่ยงการจัดเรียงหน้าซ้ำหลายครั้งและปรับปรุงประสิทธิภาพของหน้าได้