JavaScript เพื่อรับรหัสการใช้งานของแอตทริบิวต์องค์ประกอบหลอก CSS

องค์ประกอบหลอก CSS มีประสิทธิภาพมากและมักจะใช้ในการสร้างคำแนะนำสามเหลี่ยม CSS การใช้ CSS pseudo-etement สามารถบรรลุเอฟเฟกต์ง่าย ๆ โดยไม่จำเป็นต้องเพิ่มแท็ก HTML เพิ่มเติม สิ่งหนึ่งคือ JavaScript ไม่สามารถรับค่าแอตทริบิวต์ CSS เหล่านี้ได้ แต่ตอนนี้มีวิธีที่จะได้รับ:

ดูรหัส CSS ต่อไปนี้:

 .Element: ก่อน {เนื้อหา: 'ใหม่'; สี: rgb (255, 0, 0);}. องค์ประกอบ: ก่อน {เนื้อหา: 'ใหม่'; สี: rgb (255, 0, 0);}

เพื่อให้ได้แอตทริบิวต์สีของ. element: ก่อนหน้านี้คุณสามารถใช้รหัสต่อไปนี้:

 var color = window.getComputedStyle (document.QuerySelector ('. Element'), ': ก่อน'). getPropertyValue ('color') var color = window.getComputedStyle (document.QuerySelector ('. องค์ประกอบ'): ก่อน ')

ผ่านองค์ประกอบหลอกเป็นพารามิเตอร์ที่สองไปยัง Window.getComputedStyle วิธีการรับแอตทริบิวต์ CSS ใส่รหัสนี้ลงในชุดฟังก์ชันเครื่องมือของคุณ วิธีนี้จะมีประโยชน์เนื่องจากเบราว์เซอร์แบบหลอกได้รับการสนับสนุนโดยเบราว์เซอร์มากขึ้นเรื่อย ๆ

หมายเหตุของนักแปล: ไม่รองรับ Window.getComputedStyle ในเบราว์เซอร์ด้านล่าง IE9 และต้องใช้ GetPropertyValue กับวิธี GetComputedStyle IE รองรับแอตทริบิวต์ CurrentStyle แต่ก็ยังไม่สามารถรับคุณสมบัติขององค์ประกอบหลอกได้

วิธีการรับค่าของแอตทริบิวต์ CSS ขององค์ประกอบที่ระบุอย่างถูกต้อง

 <script type = "text/javascript"> ฟังก์ชั่น getStyle (elem, ชื่อ) {// ถ้าคุณสมบัติมีอยู่ในสไตล์ [] มันถูกตั้งค่าเมื่อเร็ว ๆ นี้ (และเป็นหนึ่งปัจจุบัน) ถ้า (elem.style [ชื่อ]) {return elem.style [ชื่อ]; } // มิฉะนั้นลองใช้เช่นอื่น ๆ ถ้า (elem.currentstyle) {return elem.currentstyle [ชื่อ]; } // หรือเมธอด W3C หากมีอยู่อย่างอื่นถ้า (document.defaultView && document.defaultView.getComputedStyle) {// มันใช้วิธีการเขียนสไตล์ "text-allign" แบบดั้งเดิมแทนที่จะเป็น "textalign" ชื่อ = name.replace (/([az])/g,-$ 1 "); NAME = NAME.TOLOWERCASE (); // รับวัตถุสไตล์และรับค่าของคุณสมบัติ (ถ้ามีอยู่) var s = document.defaultView.getComputedStyle (elem, ""); ส่งคืน s && s.getPropertyValue (ชื่อ); // มิฉะนั้นจะใช้เบราว์เซอร์อื่น} อื่น {return null; }} </script>