ใช้ JavaScript เพื่อรับแอตทริบิวต์ Pseudo-Element
ทุกคนรู้วิธีรับค่าสไตล์ CSS ผ่านแอตทริบิวต์สไตล์ขององค์ประกอบ แต่จะได้รับค่าแอตทริบิวต์ขององค์ประกอบหลอกได้หรือไม่? ใช่คุณยังสามารถเข้าถึงองค์ประกอบหลอกในหน้าโดยใช้ JavaScript
การคัดลอกรหัสมีดังนี้:
// รับค่าสีของ. element: ก่อนหน้า
var color = window.getComputedStyle (
Document.QuerySelector ('. Element'), ': ก่อน'
) .getPropertyValue ('สี');
// รับค่าเนื้อหาของ. element: ก่อนหน้า
var content = window.getComputedStyle (
Document.QuerySelector ('. Element'), ': ก่อน'
) .getPropertyValue ('เนื้อหา');
คุณเคยเห็นไหม ฉันสามารถเข้าถึงค่าแอตทริบิวต์เนื้อหาในองค์ประกอบหลอก หากคุณต้องการสร้างเว็บไซต์ที่มีชีวิตชีวาและเก๋ไก๋นี่เป็นเทคนิคที่มีประโยชน์มาก!
API ในชั้นเรียน
ไลบรารีเครื่องมือ JavaScript จำนวนมากมี AddClass, RemoveClass และ Toggleclass เพื่อให้เข้ากันได้กับเบราว์เซอร์เก่าไลบรารีคลาสเหล่านี้ใช้วิธีการค้นหาชื่อคลาสขององค์ประกอบต่อท้ายและลบคลาสนี้จากนั้นอัปเดตคลาสคลาส ในความเป็นจริงมี API ใหม่ที่ให้วิธีการเพิ่มลบและกลับแอตทริบิวต์คลาส CSS ที่เรียกว่า ClassList:
การคัดลอกรหัสมีดังนี้:
mydiv.classlist.add ('mycssclass'); // เพิ่มคลาส
mydiv.classlist.remove ('mycssclass'); // ลบชั้นเรียน
mydiv.classlist.toggle ('mycssclass'); // สลับชั้นเรียน
เบราว์เซอร์ส่วนใหญ่ใช้ API ClassList OPI เร็วมากและในที่สุด IE10 ก็ใช้งานได้เช่นกัน
เพิ่มและลบกฎสไตล์ไปยังแผ่นสไตล์โดยตรง
เราทุกคนคุ้นเคยกับการใช้ Element.style.propertyName เพื่อปรับเปลี่ยนสไตล์ การใช้ JavaScript สามารถช่วยเราทำสิ่งนี้ได้ แต่คุณรู้วิธีเพิ่มหรือแก้ไขกฎสไตล์ CSS ที่มีอยู่หรือไม่? ง่ายมากจริงๆ
การคัดลอกรหัสมีดังนี้:
ฟังก์ชั่น addcssrule (แผ่น, ตัวเลือก, กฎ, ดัชนี) {
if (sheet.insertrule) {
sheet.insertrule (ตัวเลือก + "{" + กฎ + "}", ดัชนี);
-
อื่น {
sheet.addrule (ตัวเลือก, กฎ, ดัชนี);
-
-
// ใช้มัน!
addcssrule (document.stylesheets [0], "ส่วนหัว", "ลอย: ซ้าย");
วิธีนี้มักใช้เพื่อสร้างกฎสไตล์ใหม่ แต่คุณสามารถทำได้หากคุณต้องการแก้ไขกฎที่มีอยู่
กำลังโหลดไฟล์ CSS
การโหลดรูปภาพขี้เกียจ, JSON, สคริปต์ ฯลฯ เป็นวิธีที่ดีในการเพิ่มความเร็วในการแสดงหน้า เราสามารถใช้ curl.js และตัวโหลดจาวาสคริปต์อื่น ๆ เพื่อหน่วงเวลาในการโหลดทรัพยากรภายนอกเหล่านี้ แต่คุณรู้หรือไม่ว่าแผ่นสไตล์ CSS สามารถโหลดล่าช้าได้และฟังก์ชั่นการโทรกลับจะได้รับแจ้งหลังจากโหลดสำเร็จ
การคัดลอกรหัสมีดังนี้:
ขด (
-
"Namespace/MyWidget",
"CSS! Namespace/Resources/mywidget.css"
-
ฟังก์ชั่น (mywidget) {
// คุณสามารถทำงานบน MyWidget
// ไม่มีการอ้างอิงถึงไฟล์ CSS นี้ที่นี่เพราะไม่จำเป็น
// เราแค่ต้องการให้โหลดบนหน้า
-
-
สคริปต์ที่เน้นไวยากรณ์ของ PRISMJS ที่ใช้โดยเว็บไซต์นี้คือการโหลดขี้เกียจ เมื่อมีการโหลดทรัพยากรทั้งหมดฟังก์ชันการโทรกลับจะถูกเรียกใช้และฉันสามารถโหลดได้ในฟังก์ชันการโทรกลับ มีประโยชน์มาก!
เหตุการณ์ตัวชี้เมาส์ CSS
แอตทริบิวต์เหตุการณ์ตัวชี้ของเหตุการณ์ตัวชี้เมาส์ CSS นั้นน่าสนใจมาก ประสิทธิภาพของมันคล้ายกับ JavaScript มาก เมื่อคุณตั้งค่าแอตทริบิวต์นี้เป็น NONE มันสามารถป้องกันไม่ให้องค์ประกอบถูกปิดใช้งานได้อย่างมีประสิทธิภาพ คุณอาจพูดว่า "แล้วไง?" แต่ที่จริงแล้วมันห้ามมิให้มีเหตุการณ์ JavaScript หรือฟังก์ชั่นการโทรกลับในองค์ประกอบนี้!
การคัดลอกรหัสมีดังนี้:
.Disabled {ตัวชี้ Events: ไม่มี; -
คลิกที่องค์ประกอบนี้และคุณจะพบว่าไม่มีเหตุการณ์ใดที่จะถูกเรียกใช้โดยผู้ฟังที่คุณวางไว้ในองค์ประกอบนี้ คุณลักษณะที่มีมนต์ขลังจริง ๆ - คุณไม่จำเป็นต้องตรวจสอบว่ามีคลาส CSS บางตัวเพื่อป้องกันไม่ให้เกิดเหตุการณ์หรือไม่
ข้างต้นเป็น 5 วิธีในการโต้ตอบกับ JavaScript และ CSS โดยฉัน หากคุณมีคนที่ดีกว่านี้โปรดบอกฉัน บทความนี้จะได้รับการปรับปรุงอย่างต่อเนื่อง