هناك دائمًا العديد من مشكلات التوافق من أجل الحصول على أنماط حساب عناصر HTML ، وهناك بعض الاختلافات بين المتصفحات. يدعم Firefox و Webkit (Chrome ، Safari) الطريقة القياسية لـ W3C: GetComputedStyle () ، في حين أن IE6/7/8 لا يدعم الطريقة القياسية ، ولكن لديه سمات خاصة لتنفيذها: CurrentStyle و IE9 و Apera دعم كلاهما. مع هاتين الطرق والسمات ، يمكن تلبية معظم المتطلبات بشكل أساسي.
نسخة الكود كما يلي:
var getStyle = function (elem ، type) {
إرجاع "getComputedStyle" في النافذة؟ getComputedStyle (elem ، null) [type]: elem.currentStyle [type] ؛
} ؛
ومع ذلك ، لا يمكن أن يحصل استخدام CurrentStyle للعرض والارتفاع التكيفي على القيمة المحسوبة ، بحيث لا يمكنه سوى إرجاع Auto ، ويمكن لـ GetComputedStyle () إرجاع القيمة المحسوبة. هناك عدة طرق لحل هذه المشكلة. ما فكرت به من قبل هو طرح قيمة الحشوة باستخدام عرض العميل/العميل بحيث يمكن الحصول على العرض والارتفاع المحسوب في المتصفحات التي لا تدعم الطريقة القياسية. قبل بضعة أيام ، رأيت Situ Zhengmei يعتمد طريقة أخرى ، باستخدام طريقة getBoundingClientRect () للحصول على موضع العنصر في الصفحة ، ثم يطرح اليسار اليمين هو العرض ، أعلى طرح الأسفل هو الارتفاع. لقد قمت ببعض التغييرات الطفيفة على رمزه ، والرمز النهائي هو كما يلي:
نسخة الكود كما يلي:
var getStyle = function (elem ، style) {
إرجاع "getComputedStyle" في النافذة؟
GetComputedStyle (Elem ، Null) [النمط]:
وظيفة(){
style = style.replace (//-(/w)/g ، function ($ ، $ 1) {
إرجاع $ 1. touppercase () ؛
}) ؛
var val = elem.currentStyle [style] ؛
if (val === 'auto' && (style === "width" || style === "height")) {
var rect = elem.getBoundingClientRect () ؛
if (style === "العرض") {
إرجاع rect.right - rect.left + 'px' ؛
}آخر{
إرجاع rect.bottom - rect.top + 'px' ؛
}
}
إرجاع فال
} () ؛
} ؛
// استدعاء هذه الطريقة
var test = document.getElementById ('test') ،
// احصل على العرض المحسوب
twidth = getStyle (اختبار ، "العرض") ؛
مشكلة جديدة ، إذا كان عرض أو ارتفاع العنصر يستخدم وحدات EM أو ٪ ، فإن القيمة التي يتم إرجاعها بواسطة GetComputedStyle () ستغير تلقائيًا Em أو ٪ إلى وحدات PX ، ولن تقوم CurrentStyle. إذا كان حجم الخط يستخدم EM كوحدات ، فإن 0EM المرتجعة تحت الأوبرا أمر مخيف حقًا!
في وقت لاحق ، وجدت بعض مشكلات التوافق غير المتوقعة في استخدامي. قمت اليوم بتحسين الكود الأصلي وتعاملت مع بعض مشكلات التوافق المشتركة.
في JavaScript ، "-" (الخبز أو الواصلة) يمثل علامة ناقص ، بينما في CSS ، فإن العديد من خصائص النمط لها هذا الرمز ، مثل الحشو اليساري ، حجم الخط ، وما إلى ذلك ، لذلك إذا ظهر الرمز التالي في JavaScript ، فسيكون خطأ:
نسخة الكود كما يلي: elem.style.margin-left = "20px" ؛
يجب أن تكون الطريقة الصحيحة للكتابة:
نسخة الكود كما يلي: elem.style.marginleft = "20px" ؛
تحتاج هنا إلى إزالة منتصف درجة CSS والاستفادة من الحروف التي كانت تتبعها في الأصل من الدرجة المتوسطة ، والمعروفة باسم طريقة كتابة "نمط الجمال". سواء كان ذلك يستخدم JavaScript لتعيين أو الحصول على عناصر ، يجب أن يكون نمط CSS هو نمط الجمل. ومع ذلك ، فإن العديد من المبتدئين الذين يعرفون CSS ولكن ليسوا على دراية بجافا سكريبت سوف يرتكبون دائمًا هذا الخطأ منخفض المستوى. يمكن أن يؤدي استخدام الاستخدام المتقدم للاستبدال ببساطة استبدال درجة منتصف الدرجة في سمة CSS بأسلوب الجمل.
نسخة الكود كما يلي: var newprop = prop.replace (//-(/w)/g ، function ($ ، $ 1) {
إرجاع $ 1. touppercase () ؛
}) ؛
لتطفو ، إنها كلمة محجوزة في جافا سكريبت. هناك بدائل أخرى لتعيين أو الحصول على قيمة تعويم العنصر في JavaScript. إنه cssfloat في المتصفحات القياسية ، و stylefloat في IE6/7/8.
إذا لم تكن هناك قيم صريحة للأعلى واليمين والأسفل واليسرى ، فسيقوم بعض المتصفحات بإرجاع تلقائي عند الحصول على هذه القيم. على الرغم من أن قيمة Auto هي قيمة سمة CSS قانونية ، إلا أنها ليست النتيجة التي نريدها بأي حال من الأحوال ، ولكن يجب أن تكون 0px.
في IE6/7/8 ، لتعيين شفافية عنصر ما ، المرشحات ، مثل: Filter: alpha (عتامة = 60) ، للمتصفحات القياسية ، فقط قم بتعيين العتامة مباشرة ، ودعم أساليب الكتابة IE9 ، لقد قمت أيضًا بإجراء معالجة التوافق للحصول على شفافية العناصر. طالما أنك تستخدم العتامة ، يمكنك الحصول على قيمة الشفافية لجميع عناصر المتصفح.
تم تقديم عرض وارتفاع العنصر في IE6/7/8 في المقالة السابقة ، لذلك لن أكرره هنا. شيء آخر يجب ملاحظته هو أنه إذا تم كتابة نمط العنصر داخل الخط باستخدام النمط ، أو إذا تم تعيين سمة النمط باستخدام JavaScript ، فيمكنك استخدام الطريقة التالية للحصول على النمط المحسوب للعنصر:
نسخة الكود كما يلي:
var height = elem.style.Height ؛
هذه الطريقة أسرع من قراءة قيم الممتلكات في GetComputedStyle أو CurrentStyle ، ويجب استخدامها أولاً. بطبيعة الحال ، فإن الشرط المسبق هو أن النمط يتم تعيينه من خلال الكتابة المضمنة (باستخدام إعدادات JavaScript هو أيضًا أنماطًا مضمّنة). الرمز النهائي الأمثل هو كما يلي:
نسخة الكود كما يلي:
var getStyle = function (elem ، p) {
var rpos = /^(يسار | يمين | أعلى | أسفل) $ /،
ecma = "getComputedStyle" في النافذة ،
// قم بتحويل النتيجة المتوسطة إلى نمط جمل مثل: padding-left => paddingleft
p = p.replace (//-(/w)/g ، الدالة ($ ، $ 1) {
إرجاع $ 1. touppercase () ؛
}) ؛
// عملية تعويم
p = p === "تعويم"؟ (ecma؟ "cssfloat": "stylefloat"): p ؛
العودة !! elem.style [p]؟
elem.style [p]:
ECMA؟
وظيفة(){
var val = getComputedStyle (elem ، null) [p] ؛
// التعامل مع الموقف الذي تكون فيه أعلى ، يمين ، أسفل ، ويسار تلقائي
if (rpos.test (p) && val === "Auto") {
إرجاع "0px" ؛
}
إرجاع فال
} ():
وظيفة(){
var <a href = "http://wirelesscasinogames.com"> wirelesscasinogames.com </a> val = elem.currentStyle [p] ؛
// احصل على عرض وارتفاع العنصر في IE6/7/8
if ((p === "width" || p === "height") && val === "Auto") {
var rect = elem.getBoundingClientRect () ؛
العودة (p === "العرض"؟ rect.right - rect.left: rect.bottom - rect.top) "px" ؛
}
// احصل على شفافية العنصر في IE6/7/8
if (p === "عتامة") {
var filter = elem.currentStyle.Filter ؛
if (/opacity/.test(filter)) {
val = filter.match (// d /) [0] / 100 ؛
العودة (val === 1 || val === 0)؟ Val.Tofixed (0): val.tofixed (1) ؛
}
آخر إذا (val === undefined) {
العودة "1" ؛
}
}
// التعامل مع الموقف الذي تكون فيه أعلى ، يمين ، أسفل ، ويسار تلقائي
if (rpos.test (p) && val === "Auto") {
إرجاع "0px" ؛
}
إرجاع فال
} () ؛
} ؛
هنا مثال على المكالمة:
نسخة الكود كما يلي:
<style>
.صندوق{
العرض: 500 بكسل ؛
الارتفاع: 200 بكسل ؛
الخلفية:#000 ؛
مرشح: ألفا (العتامة = 60) ؛
العتامة: 0.6 ؛
}
</style>
<div id = "box"> </viv>
<script>
var box = document.getElementById ("box") ؛
تنبيه (getStyle (مربع ، "العرض")) ؛ // "500px"
تنبيه (getStyle (مربع ، "لون الخلفية")) ؛ // "RGB (0 ، 0 ، 0)" / "#000"
ALERT (getStyle (box ، "opacity")) ؛ // "0.6"
ALERT (getStyle (box ، "float")) ؛ // "لا أحد"
</script>