นอกเหนือจากการกำหนดสไตล์แบบอินไลน์ (นั่นคือ เพิ่มผ่านแอตทริบิวต์ style) แล้ว สไตล์ CSS ขององค์ประกอบยังมีสองวิธี: css ที่ฝังอยู่ในเพจ และ css ที่นำมาใช้ภายนอก อย่างไรก็ตาม ใน JS สามารถรับได้เฉพาะแอตทริบิวต์สไตล์อินไลน์เท่านั้นผ่าน el.style.xxx ซึ่งมีข้อจำกัดค่อนข้างมาก โชคดีที่เบราว์เซอร์มีวิธีอื่นในการรับคุณลักษณะสไตล์ที่กำหนดด้วยวิธีอื่น ใน IE มี currentStyle, FF และเบราว์เซอร์มาตรฐาน w3c อื่นๆ เช่น getComputedStyle
เพื่อความสะดวกในการใช้งาน js-lib ในปัจจุบันจำนวนมากได้สรุปสิ่งนี้ไว้ แต่หลายครั้งที่เราไม่จำเป็นต้องแนะนำ lib ใดๆ สิ่งที่เราต้องมีคือฟังก์ชัน getStyle เพื่อรับคำจำกัดความสไตล์ปัจจุบันขององค์ประกอบ หลังจากอ้างอิงโค้ด JS-Lib หลายโค้ดแล้ว ฉันจึงตัดสินใจใช้ฟังก์ชัน getStyle เวอร์ชันที่เรียบง่าย เป้าหมายของฟังก์ชันนี้คือการตอบสนองความต้องการส่วนใหญ่ ข้ามเบราว์เซอร์ มีโค้ดที่กระชับ และมีประสิทธิภาพเป็นเลิศ ตามข้อกำหนดเหล่านี้ ฉันใช้เวลาหนึ่งชั่วโมงกว่าจะเสร็จ ฉันใช้เคล็ดลับหลายประการเป็นหลัก เช่น "คุณลักษณะตัวดำเนินการเชิงตรรกะ JS โค้ด "การคอมไพล์" และการดำเนินการฟังก์ชันทันที ฉันเขียนไว้ที่นี่เพื่อใช้ในอนาคต ถ้ามัน สามารถเป็นประโยชน์กับเพื่อน ๆ ได้แน่นอนมันจะดีกว่า
รหัสโปรแกรม
var getStyle=function(){
var f=document.defaultView;
กลับฟังก์ชั่นใหม่ ('el', 'สไตล์', [
"style.indexOf('-')>-1 && (style=style.replace(/-( \w)/g,function(m,a){return a.toUpperCase()}));",
"style=='float' && (style='",
ฉ ? 'cssFloat' : 'styleFloat',
"');กลับมา el.style[สไตล์] || ",
f ? 'window.getComputedStyle(el, null)[สไตล์]' : 'el.currentStyle[สไตล์]',
' ||. null;'].join(''));
}();
// ตัวอย่างการใช้งาน:
var el=document.getElementById('ทดสอบ');
getStyle(el,'line-height');
getStyle(el,'สี');
getStyle(el,'ลอย');
จาก: http://www.ajaxbbs.net/post/webFront/JS-Get-Style-Function.html