الرمز الأساسي:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> مستند </title> <style> div {color: Yellow ؛ } </style> </head> <body> <viv> هذا هو div </viv> </body> </html>1. احصل عليه باستخدام سمة element.style
<script> var div = document.getElementSbyTagName ("div") [0] ؛ console.log (div.style.color) ؛ // "" console.log (div.style.backgroundColor) ؛ // الأحمر </script>يمكن أن تحصل سمة element.style على أنماط مضمنة فقط ، ولا يمكنها الحصول على أنماط في علامة <style> ، ولا يمكن أن تحصل على أنماط خارجية.
نظرًا لأن element.style هي سمة لعنصر ما ، يمكننا إعادة تعيين السمة لتجاوز عرض العنصر.
<script> var div = document.getElementSbyTagName ("div") [0] ؛ Div.Style ['background-color'] = "Green" ؛ console.log (div.style.backgroundColor) ؛ // الأخضر </script>2. احصل على الأنماط من خلال getComputedStyle و CurrentStyle
بيئة استخدام getComputedStyle هي Chrome/Safari/Firefox IE 9،10،11
<script> var div = document.getElementSbyTagName ("div") [0] ؛ var styleObj = window.getComputedStyle (div ، null) ؛ console.log (StyleObj.backgroundColor) ؛ // red console.log (styleobj.color) ؛ // الأصفر </script>يمكن دعم CurrentStyle بشكل مثالي في IE ، لا يدعم Chrome ، FF لا يدعمه
<script> var div = document.getElementSbyTagName ("div") [0] ؛ var styleObj = div.currentStyle ؛ console.log (StyleObj.backgroundColor) ؛ // red console.log (styleobj.color) ؛ // الأصفر </script>3. الفرق بين ele.style و getComputedStyle أو CurrentStyle
3.1Ele.Style يتم قراءة المكاتب ، في حين أن GetComputedStyle و CurrentStyle هي القراءة فقط
3.2 ele.style يمكن أن تحصل على نمط CSS فقط في خاصية النمط في السطر ، ويمكن أيضًا الحصول على قيم افتراضية أخرى.
3.3 ما هو ele.style يحصل على النمط في سمة النمط ، وليس بالضرورة النمط النهائي ، بينما يحصل الآخران على نمط CSS النهائي للعنصر
4. احصل على كتابة التوافق مع الأسلوب
<script> // احصل على النمط غير السطر (النمط في علامة النمط أو النمط في ملف الرابط CSS) ، OBJ هو العنصر ، ATTR هي وظيفة اسم النمط getStyle (obj ، attr) {// for ie if (obj.currentStyle) {return obj.currentStyle [attr] ؛ // نظرًا لأن ATTR تم تمريرها بواسطة الوظيفة عبارة عن سلسلة ، يجب عليك استخدام [] للحصول على القيمة} آخر {// لإرجاع الإرجاع. }} /* الحصول على أو تعيين سمة css* / function css (obj ، attr ، value) {if (mancepitions.length == 2) {return getStyle (obj ، attr) ؛ } آخر {obj.style [attr] = value ؛ }} </script>5.Window.getComputedStyle (eLe [، pseudoelt]) ؛
إذا كانت المعلمة الثانية لاغية أو حذفت ، فاحصل على كائن CSSSTyledEclaration
إذا كانت فئة زائفة ، يتم الحصول على كائن CSSStyledEclaration من الفئة الزائفة
<style> div {width: 200px ؛ الارتفاع: 200 بكسل ؛ لون الخلفية:#fc9 ؛ حجم الخط: 20 بكسل ؛ محاذاة النص: المركز ؛ } div: بعد {content: "هذا بعد" ؛ العرض: كتلة ؛ العرض: 100px ؛ الارتفاع: 100px ؛ لون الخلفية:#F93 ؛ الهامش: 0 Auto ؛ ارتفاع الخط: 50 بكسل ؛ } </style> <body> <div id = 'mydiv'> هذا هو div </viv> <input id = 'btn' type = "button" value = 'getStyle'/> <script> var btn = document.queryselector ('#btn') ؛ btn.onclick = function () {var div = document.queryselector ('#mydiv') ؛ var styleObj = window.getComputedStyle (div ، 'efr') ؛ console.log (styleObj ['width']) ؛ } </script> </body>6.GetPropertyValue يحصل على قيمة الخاصية المحددة في كائن CSSStyledEclaration
<script> var div = document.getElementSbyTagName ("div") [0] ؛ var styleObj = window.getComputedStyle (div ، null) ؛ console.log (styleObj.getPropertyValue ("background-color")) ؛ </script>PropertyName في getPropertyValue (propertyName) ؛ لا يمكن أن يكون تعبير الجمل
OBJ.CurrentStyle ['margin-left'] يعمل
OBJ.CurrentStyle ['marginleft'] يعمل
Window.getComputedStyle (OBJ ، NULL) ['margin-left'] يعمل
Window.getComputedStyle (OBJ ، NULL) ['marginleft'] يعمل
window.getComputedStyle (OBJ ، Null) .getPropertyValue ('margin-left') صالح
window.getComputedStyle (OBJ ، Null) .getPropertyValue ('marginleft') غير صالح
OBJ.CurrentStyle.width صالحة
OBJ.CurrentStyle.Background غير صالح
OBJ.CurrentStyle.BackgroundColor Works
window.getComputedStyle (OBJ ، NULL)
Window.getComputedStyle (OBJ ، NULL)
window.getComputedStyle (OBJ ، Null) .backgroundColor Works
باختصار ، لا يمكن الإشارة مباشرة إلى السمة "-" ، لذلك هناك طريقة GetPropertyValue للتعامل معها ، ولكن يمكن استخدام [] لاستبدال GetPropertyValue.
7.DefaultView
في العديد من الرموز التجريبية عبر الإنترنت ، يتم استدعاء getComputedStyle عبر كائن Document.DefaultView. في معظم الحالات ، ليس هذا مطلوبًا ، حيث يمكن استدعاؤه مباشرة من خلال كائن النافذة. ولكن هناك موقف يتعين عليك فيه استخدام DefaultView ، وهو الوصول إلى الأنماط داخل الإطار الفرعي على Firefox3.6 (iframe)
طريقة التنفيذ البسيطة أعلاه للحصول على أنماط (موصى بها) من JS هي كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.