مقدمة عن الفرق بين الأناقة ، CurrentStyle ، getComputedStyle
هناك ثلاث طرق لتصميم الأوراق
نمط مضمّن: إنه مكتوب في العلامة. النمط المضمن صالح فقط لجميع العلامات.
ورقة الأنماط الداخلية: تتم كتابتها في HTML ، والأسلوب الداخلي صالح فقط لصفحة الويب.
ورقة الأنماط الخارجية: إذا كانت العديد من صفحات الويب بحاجة إلى استخدام نفس الأنماط ، فاكتب الأنماط في ملف CSS باستخدام .CSS مثل اللاحقة ، ثم الرجوع إلى ملف CSS في كل صفحة ويب تحتاج إلى استخدام هذه الأنماط. سمة النمط الأكثر استخداما هي. في JavaScript ، يمكن الحصول على قيمة xxx من خلال المستند. ومع ذلك ، بشكل غير متوقع ، يمكن أن يحصل هذا فقط على قيمة النمط من خلال الأساليب المدمجة ، أي القيمة المحددة في سمة النمط.
الحل: قدم النمط القياسي للأناقة في CurrentStyle و RunTimestyle و GetComputedStyle ، والذي قد يتم تحديده بواسطة سمة النمط!
RunTimestyle Runtime Style! إذا كان يتداخل مع خاصية النمط ، فسيتم كتابة خاصية النمط!
يشير CurrentStyle إلى مزيج من الأناقة و RunTimestyle! يمكنك الحصول على قيمة نمط CSS المشار إليها من خلال أو خارجيًا من خلال CurrentStyle (أي فقط). على سبيل المثال: document.getElementById ("Test"). CurrentStyle.top
لكي تكون متوافقًا مع FF ، يجب أن تحتاج إلى getComputedStyle للقيام بذلك
ملاحظة: getComputedStyle في Firefox ، CurrentStyle في IE. على سبيل المثال
<style> #mydiv {width: 300px ؛} </style>لكن:
var mydiv = document.getElementById ('mydiv') ؛ if (mydiv.currentStyle) {var width = mydiv.currentStyle ['width'] NULL) ['width'] ؛ ALERT ('Firefox:' + width) ؛}بالإضافة إلى ذلك ، تحت FF ، يمكنك أيضًا الحصول عليها بالطريقة التالية
document.defaultView.getComputedStyle (mydiv ، null) .width ؛ window.getComputedStyle (mydiv ، null) .width ؛
فيما يلي بعض الإضافات:
أثناء قراءة المدونة ، رأيت هؤلاء الرجال الثلاثة - Style ، CurrentStyle ، GetComputedStyle. لم أواجهها عندما كنت أدرس من قبل ، لكنني الآن واجهتها ، لذا فقد درستها قليلاً. لقد اكتشفت بعض المشكلات ، ربما كان ذلك بسبب عمر الوقت ، أو قد يكون بسبب جهلي ، لكنه في حيرة من أمري. على الرغم من أن Tao Yuanming قال إنه لم يسعى إلى الكثير من الفهم عند الدراسة ، كمطور أمامي يريد أن يصبح واجهة أمامية ممتازة ، إلا أنه لا يزال بحاجة إلى فهمه ، وإلا فلن يكون قادرًا على النوم!
دعنا نضع الأساس أولاً. دعنا نتحدث عن الأشكال الثلاثة لأوراق الأنماط المتتالية (الأنواع الثلاثة لها أسماء مختلفة ، وفقًا لعاداتهم الخاصة):
واحد. النمط المضمّن: تعيين مع سمة النمط في علامات HTML. يحب:
1 <p style = "color:#f90 ؛"> هذا هو النمط المضمن </p>
اثنين. نمط التضمين: اضبط من خلال علامة <head> من خلال علامة <Style>. يحب:
<style type = "text/css">/*هذا هو النمط المدمج*/.stuff {color:#f90} </style>ثلاثة. النمط الخارجي: تعيين عبر <Nink> علامة. يحب:
<Link Rel = "STYLESHEET" href = "path/style.css" type = "text/css"> ================================================================================================================================================ .stuff {color:#f90 ؛}ينصح الطريقة الثالثة.
الأبطال الثلاثة أدناه موجودون في الميدان.
كان أول شخص سار ببطء نحونا هو الأسلوب. يتم استخدامه في obj.style.attr ؛ علق ناقد فيلم على مدونته:
يمكن أن يحصل الأسلوب على النمط المضمّن للعنصر ، ولا يمكن الحصول على الأنماط الداخلية والخارجية باستخدام النمط.
لقد تحقق من ذلك بالرمز التالي ، وهو بالفعل كما هو مذكور أعلاه. لقد استخدمت ثلاثة أنماط والنتيجة التي حصلت عليها هي قيمة النمط المضمّن.
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <title> undled document </title> <link href = "style. type = "text/css"/> <style type = "text/css"> #stuff {width: 300px ؛} </style> <script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementById ('') ؛ console.log (Odiv.Style.Width) ؛ //alert(odiv.style.width) ؛ } ؛ </script> </head> <body> <div id = "ages"> </viv> </body> </html>نمط ورقة الأنماط الخارجي. CSS:
1 charset "UTF-8" ؛ 2 / * css مستند * / 3 #stuff {width: 100px ؛}
والنتيجة هي 400 بكسل.
يتبع النمط الحالي ، الذي يقال إنه يحتوي على MS دعم قوي ، مما يعني أنه لا يمكن استخدام هذا الرجل إلا في متصفح IE. البعض الآخر ليسوا جيدين. يتم استخدامه بواسطة window.currentStyle ["attr '] أو window.currentStyle.attr.
آخر واحد يأتي إلى getComputedStyle ، الذي يستخدم window.getComputedStyle (ob ، pseudoelt) ["attr ']
علق الناقد السينمائي:
تعمل GetComputedStyle مثل CurrentStyle ، لكنها مناسبة لـ FF و Opera و Safari و Chrome.
مع موقف متشكك ، قمت بالتحقق منه مرة أخرى ، و IE7 و IE8 و IE9 جميع الأخطاء المبلغ عنها:
لا يدعم الكائن سمة "getComputedStyle"
قضايا توافق المتصفح. تعد مشكلة توافق المتصفح في الواقع صداعًا للمطورين في الواجهة الأمامية ، وخاصة الجاني IE6. لكن لا يمكننا أن نخاف وأن نبقى بعيدًا عنه ، ولكن بدلاً من ذلك نتعامل مع التحركات ، ويأتي الجنود لمنع الماء والتربة. سيكون لديك الكثير من المرح في القتال معها وشعور بالإنجاز بعد هزيمته! ! !
نقطة أخرى: لا يمكن لـ GetComputedStyle و CurrentStyle الحصول على قيم السمات فقط ، ولكن لا يمكن تعيين سمات. إذا كنت ترغب في تعيين قيمة السمة ، فاستخدم OB.STYLE.ATTR.
من فضلك أعطني بعض النصائح إذا كان هناك شيء خاطئ ، شكرًا لك مقدمًا! !