طريقة JavaScript للحصول على قيمة سمة CSS: getComputedStyle و CurrentStyle
1. لأسلوب CSS المضمن للعنصر (<div style = "color:#369"> Hello </fiv>) ، يمكنك استخدام element.style.color مباشرة للحصول على قيمة سمة CSS مباشرة ؛
2. ومع ذلك ، من المستحيل الحصول على أنماط CSS المحددة خارجيا. علاوة على ذلك ، تختلف الطرق التي يستخدمها متصفح IE عن المتصفحات القياسية الأخرى (Firefox ، Chrome ، Opera ، Safari). يستخدم IE Browser element.currentStyle ، ويستخدم المتصفح القياسي W3C GetComputedStyle للحصول عليه.
1. IE يحصل على قيمة سمة CSS محددة خارجيا في العنصر: element.currentStyle
يقوم كائن CurrentStyle بإرجاع ورقة الأنماط على العنصر ، لكن كائن النمط يعيد فقط النمط المدمج المطبق على العنصر من خلال سمة علامة النمط.
لذلك ، قد تختلف قيمة النمط التي تم الحصول عليها من خلال كائن CurrentStyle عن قيمة النمط التي تم الحصول عليها من خلال كائن النمط.
على سبيل المثال ، إذا تم تعيين قيمة خاصية اللون للفقرة على اللون الأحمر (الأحمر) من خلال رابط أو ورقة أنماط مضمنة بدلاً من تضمين ، فإن الكائن .currentStyle.Color سيعيد اللون الصحيح ، ولا يمكن أن يعيد نمط الكائن. ومع ذلك ، إذا كان المستخدم يحدد <p style = "color: 'red'"> ، فسيقوم كل من كائنات CurrentStyle and Style بإرجاع القيمة باللون الأحمر.
يعكس كائن CurrentStyle أولوية النمط في ورقة الأنماط. في HTML ، هذا الترتيب هو:
1) نمط مضمّن
2) قواعد ورقة الأنماط
3) سمات علامة HTML
4) التعريف الداخلي لعلامات HTML
2. W3C تحصل على قيمة سمة CSS المحددة خارجيا: window.getComputedStyle (العنصر ، pseudoelt)
العنصر المطلوب ، عنصر HTML
مطلوب pseudoelt للحصول على نمط الفئة الزائفة للعنصر
نسخة الكود كما يلي:
وظيفة getStyle (العقدة ، الخاصية) {
if (node.style [property]) {
إرجاع node.style [property] ؛
}
آخر إذا (node.currentStyle) {
إرجاع node.currentStyle [property] ؛
}
آخر if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle (Node ، Null) ؛
Return Style.getPropertyValue (Property) ؛
}
العودة لاغية.
}