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