1. เปลี่ยนสไตล์บางส่วน
มีสามประเภท: การเปลี่ยนสไตล์โดยตรง, การเปลี่ยน className และการเปลี่ยน cssText สิ่งที่ควรทราบคือ:
ให้ความสนใจกับการใช้อักษรตัวพิมพ์ใหญ่:
JavaScript คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ ClassName ไม่สามารถเขียน "N" เป็น "n" และ cssText ไม่สามารถเขียน "T" เป็น "t" ได้ มิฉะนั้นจะไม่สามารถสร้างเอฟเฟกต์ได้
วิธีการโทร:
หากคุณเปลี่ยน className ให้ประกาศคลาสในสไตล์ชีตล่วงหน้า แต่อย่าทำตามสไตล์เมื่อเรียกใช้ การเขียนเช่น document.getElementById('obj').style.className="..." ไม่ถูกต้อง! เขียนได้เป็น: document.getElementById('obj').className="…" เท่านั้น
เปลี่ยน cssText
แต่ถ้าคุณใช้ cssText คุณต้องเพิ่มสไตล์ วิธีเขียนที่ถูกต้องคือ: document.getElementById('obj').style.cssText=”…”
ฉันไม่จำเป็นต้องพูดถึงการเปลี่ยนสไตล์โดยตรง เพียงจำไว้ว่าต้องเขียนสไตล์ที่เฉพาะเจาะจงเช่น
คัดลอกรหัสรหัสดังต่อไปนี้:
document.getElementById('obj').style.พื้นหลังสี=”#003366″
2. เปลี่ยนสไตล์ไปทั่วโลก
โดยปกติ เราสามารถสลับรูปแบบหน้าเว็บได้แบบเรียลไทม์โดยการเปลี่ยนค่า href ของรูปแบบลิงก์ภายนอก ซึ่งก็คือ "การเปลี่ยนรูปแบบเทมเพลต" ในตอนนี้เราจำเป็นต้องให้ ID แก่เป้าหมายที่ต้องการเปลี่ยนแปลงก่อน เช่น
<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
มันง่ายมากที่จะโทรเช่น
<span on click="javascript:document.getElementById('css').href = 'ie.css'">คลิกฉันเพื่อเปลี่ยนสไตล์</span>
มือใหม่มักไม่ทราบวิธีเขียนสไตล์ CSS เฉพาะใน JavaScript และบางครั้งข้อกำหนดอาจแตกต่างกันในเบราว์เซอร์ต่างๆ ตัวอย่างเช่น float เขียนเป็น styleFloat ใน IE และ cssFloat ใน FIREFOX ซึ่งต้องการให้ทุกคนสะสม การค้นหา "ccvita javascript" ใน Google อาจช่วยให้คุณสงสัยได้
ความรู้พื้นฐาน
โดยปกติจะมีสามวิธีในการเรียกสไตล์ชีตในหน้าเว็บ
ประการแรก: การเชื่อมโยงไปยังไฟล์สไตล์ชีตภายนอก (การเชื่อมโยงไปยังสไตล์ชีต)
คุณสามารถสร้างไฟล์สไตล์ชีตภายนอก (.css) ก่อน จากนั้นจึงใช้ออบเจ็กต์ลิงก์ HTML ตัวอย่างมีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<หัว>
<title>ชื่อเอกสาร</title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</ลิงก์></หัว>
ใน XML คุณจะต้องเพิ่มลงในพื้นที่การประกาศตามที่แสดงในตัวอย่างต่อไปนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
< ?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
ประเภทที่สอง: กำหนดวัตถุบล็อกสไตล์ภายใน (การฝังบล็อกสไตล์)
คุณสามารถใส่ก
บล็อกวัตถุ สำหรับวิธีการกำหนด โปรดดูที่ไวยากรณ์สไตล์ชีต ตัวอย่างมีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<html>
<หัว>
<title>ชื่อเอกสาร</title>
<style type="text/css">
-
เนื้อความ {แบบอักษร: 10pt "Arial"}
h1 {แบบอักษร: 15pt/17pt "Arial";
h2 {แบบอักษร: 13pt/15pt "Arial";
p {แบบอักษร: 10pt/12pt "Arial"; สี: สีดำ}
-
</สไตล์>
</หัว>
<ร่างกาย>
</body></html>
โปรดทราบว่าการตั้งค่าแอตทริบิวต์ type ของวัตถุสไตล์เป็น "text/css" จะทำให้เบราว์เซอร์ที่ไม่สนับสนุนประเภทนี้สามารถละเว้นสไตล์ชีตได้
ประเภทที่สาม: คำจำกัดความแบบอินไลน์ (Inline Styles)
คำจำกัดความแบบอินไลน์คือการใช้แอตทริบิวต์สไตล์ของวัตถุภายในมาร์กอัปของวัตถุเพื่อกำหนดแอตทริบิวต์สไตล์ชีตที่ใช้กับแอตทริบิวต์นั้น ตัวอย่างมีดังนี้:
คัดลอกรหัสรหัสดังต่อไปนี้:
<p style="margin-left: 0.5in; margin-right:0.5in">บรรทัดนี้ได้เพิ่มแพทช์ด้านนอกด้านซ้ายและขวา</p><p> </p>