JS สามารถตระหนักได้ว่าผู้ใช้เปลี่ยนสไตล์ในหน้าโดยเลือกเงื่อนไขในหน้า สไตล์หน้าสามารถแก้ไขได้ผ่านสไตล์หรือผ่าน CSS มาดู JS เพื่อเปลี่ยนสไตล์ รหัสมีดังนี้:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <title> change.html </title> <meta http-equiv = "content-type" content-type "content-type type = "text/css" href = "./ styles.css">-> <ภาษาสคริปต์ = "javascript"> ฟังก์ชั่น test4 (เหตุการณ์) {ถ้า (event.value == "black") {// get div1 var div1 = document.getElementById ('div1'); div1.style.backgroundColor = "Black"; } if (event.value == "red") {// get div1 var div1 = document.getElementById ('div1'); div1.style.backgroundColor = "สีแดง"; }} </script> </head> <body> <div id = "div1"> div1 </div> <อินพุต type = "button" value = "black" onclick = "test4 (นี้)"/> <อินพุตประเภท = "ปุ่ม" value = "red" onclick = "test4test4 (นี่) หมายถึง <อินพุตปัจจุบันเทียบเท่ากับการรักษาเป็นวัตถุ
มาดูการเปลี่ยนสไตล์ CSS อีกครั้งรหัสมีดังนี้:
<! doctype html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <title> change1.html </title> <meta http-equiv = "content-type" เนื้อหา = "ข้อความ/html; HREF = "CSS/Change.css"> <script Language = "JavaScript"> ฟังก์ชั่น test4 (เหตุการณ์) {// รับตัวเลือกคลาสทั้งหมดในแผ่นสไตล์เพื่อรับ var ocssrules = document.stylesheets [0] .rules; // นำคลาส var style1 = ocssrules [0]; if (event.value == "black") {//window.alert(style1.style.backgroundcolor); style1.style.backgroundColor = "Black"; } อื่นถ้า (event.value == "red") {style1.style.backgroundColor = "สีแดง"; }} </script> </head> <body> <div id = "div1"> div1 </div> <อินพุต type = "button" value = "black" onclick = "test4 (นี้)"/> <อินพุตประเภท = "ปุ่ม" value = "red" onclick = "test4ด้านบนเป็นเนื้อหาทั้งหมดของตัวอย่างง่ายๆของการเปลี่ยนสไตล์และสไตล์ CSS ที่นำมาให้คุณโดยบรรณาธิการ ฉันหวังว่าทุกคนจะสนับสนุน wulin.com เพิ่มเติม ~