من أجل تسهيل الاستفسارات في المستقبل ، قرأت بعض المعلومات وتلخيص الأساليب التالية. يقتصر فقط على JS الأصلي. إذا كان هناك أي مكان خاطئ ، يرجى الإشارة إلى ذلك! آمل فقط أن يكون الجميع على ما يرام بعد قراءته!
1. يمكنك قراءة وكتابة نمط CSS لعناصر المستند من خلال كائن النمط لكائن عقدة DOM (أي كائن CSSSTyledEclaration).
على سبيل المثال: var elm = document.getElementById ('test') ؛
elm.style.color = 'Black' ؛
2. سمات القراءة والكتابة مباشرة من خلال getAttribute () ، setattribute () ، و removeAttribute () لكائن العنصر
على سبيل المثال: Elm.setAttribute ('style' ، 'اللون: أحمر ؛ ذروة الخط: 30px') ؛
3. من خلال خاصية CSSText لكائن CSSSTyledEclaration ، setProperty () ، إزالة الأساليب وغيرها من الأساليب
يحب:
elmmstyle.csstext = 'color: red ؛ line-height: 30px' ؛ elm.style.removeProperty ('color') ؛ // مسح بسرعة جميع إعلانات هذه القاعدةجزء إعلان النمط من كل قاعدة CSS (الجزء الموجود داخل الأقواس) هو كائن CSSStyledEclaration ، خصائصه وطرقه:
ملكية:
1.csstext: كل نص إعلان النمط للقاعدة الحالية. يمكن قراءة هذه الخاصية وكتابتها ويمكن استخدامها لتعيين القاعدة الحالية.
2. الطول: كم عدد الإعلانات التي تحتوي عليها القاعدة الحالية؟
3.ParentRule: القاعدة التي تحتوي على القاعدة الحالية ، خاصية ParentRule لواجهة CSSRULE نفسها.
طريقة:
1. طريقة getPropertyPriority () إرجاع الأولوية المحددة. إذا كان هناك ، فهذا "مهم" ، وإلا فهي سلسلة فارغة ؛
2. طريقة getPropertyValue إرجاع القيمة المعلنة المحددة ؛
3. طريقة العنصر (الفهرس) تُرجع اسم السمة للموضع المحدد ، وهي بشكل عام أكثر مباشرة باستخدام بناء جملة [الفهرس] ؛
4. يتم استخدام طريقة removeProperty لحذف خاصية CSS وإرجاع القيمة المحذوفة ؛
5.SESTProperty طريقة لتعيين سمة CSS المحددة ، ولا توجد قيمة إرجاع ؛
4. استخدم السمة من المستند . إنه كائن صفيف فئة للقراءة فقط ، وعنصره هو كائن ورقة CSSSTSTYSTYSTER (موروثة من كائن ورقة الأنماط). أساليب خاصية هذا الكائن هي كما يلي:
ملكية:
1. كائن صفيف فئة CSSRULES ، العناصر هي قواعد CSS CSSTYLERULE في ورقة الأنماط ؛ IE9 هي القواعد التالية ؛
2. يتم استخدام السمة المعوقة لفتح أو إغلاق ورقة أنماط ذات قيمة حقيقية أو معطلة ؛
3. خاصية ownernode تُرجع عقدة DOM حيث يوجد كائن ورقة الأنماط ، وعادةً ما يكون <link> أو <style>. لتلك الأوراق الأنماط المشار إليها من خلال أوراق الأنماط الأخرى ، هذه الخاصية خالية ؛
4. نظرًا لأن أمر css لـ css يسمح بتحميل أوراق الأنماط الأخرى في ورقة الأنماط ، فإن خاصية ورقة ParentStyleSheet لها خاصية ParentStyleSheet ، التي تُرجع ورقة الأنماط التي تتضمن ورقة الأنماط الحالية. إذا كانت ورقة الأنماط الحالية عبارة عن ورقة أنماط من المستوى الأعلى ، فإن الخاصية تُرجع فارغة ؛
5. سمة النوع تُرجع قيمة نوع كائن ورقة الأنماط ، وعادة ما تكون النص/CSS ؛
6. سمة العنوان تُرجع قيمة العنوان لكائن ورقة الأنماط ؛
7. سمة HREF هي سمة للقراءة فقط ، والتي تُرجع عنوان ورقة الأنماط لاتصال كائن ورقة الأنماط. بالنسبة للعقد المدمجة ، فإن هذه الخاصية تساوي فارغًا ؛
8. تشير سمة الوسائط إلى ما إذا كانت ورقة الأنماط هذه تستخدم للشاشة أو الطباعة أو كليهما قابلة للتطبيق (الكل). هذه السمة هي القراءة فقط والقيمة الافتراضية هي الشاشة ؛
الطريقة: DeLeterule () يحذف قاعدة من ورقة الأنماط ، وإدراج insertrule () إدراج قاعدة جديدة في ورقة الأنماط ، ويتم إضافة IE9 () و Removerule () ؛
يحب:
document.stylesheets [0] .inserTrule ('#test: hover {color: white ؛}' ، 0) ؛ document.stylesheets [0] .DeletRule (0) ؛ // حذف القاعدة الأولى في وثيقة ورقة الأنماط. // إرجاع وثيقة سلسلة المحدد. // إرجاع سلسلة القواعد ، بما في ذلك Document.Stylesheets [0] .CSSRULES [1] .CSSTEXT ؛ // إرجاع جميع سلاسل إعلان الأسلوب للقاعدة الحالية5. استخدم طريقة getComputedStyle لكائن النافذة. المعلمة الأولى هي كائن العنصر ، ويمكن أن تكون المعلمة الثانية فارغة أو سلسلة فارغة أو سلسلة عناصر زائفة. تقوم هذه الطريقة بإرجاع كائن csstyledeclaration للقراءة فقط الذي يمثل نمط الحساب. إنه يمثل معلومات النمط النهائي المطبق فعليًا على العنصر المحدد ، أي النتيجة بعد تراكب قواعد CSS المختلفة ؛
على سبيل المثال: var color = window.getComputedStyle (elm ، ': قبل'). اللون ؛
var color = window.getComputedStyle (elm ، ': قبل'). getPropertyValue ('color') ؛
أو: var color = window.getComputedStyle (elm ، null). color ؛
الفرق بين كائن CSSSTyledEclaration الذي يمثل نمطًا محسوبًا وكائن CSSSTyledEclaration الذي يمثل نمطًا مضمّنًا:
1. خصائص نمط الحساب هي قراءة فقط ؛
2. حساب قيمة النمط هي قيمة مطلقة. سيتم تحويل جميع الوحدات النسبية مثل النسب المئوية والنقاط إلى القيم المطلقة سلسلة "PX". السمة التي سيتم إرجاعها من قيمتها في تنسيق "RGB (#،#،#)" أو "RGBA (#،#،#،#)" ؛
3. لا تحسب سمات المركبة ، ولكن بناءً على السمات الأساسية فقط ، مثل عدم الاستعلام عن الهامش ، ولكن الاستعلام عن margintop وحده ، إلخ ؛
4. لم يتم تعريف خاصية CSSText في كائن النمط ؛
5. نمط الحساب هو أيضا خادع. عند استخدامه ، تحتاج إلى الانتباه إلى قيمة الإرجاع عند الاستعلام عن سمات معينة. على سبيل المثال ، الاستعلام عن أسرة الخط ؛
6. طريقة getComputedStyle غير مدعومة أدناه IE9. كائن العنصر من IE لديه سمة CurrentStyle ؛
6. أضف ورقة الأنماط مباشرة
1. قم بإنشاء علامة <style> لإضافة ورقة نمط مدمجة
var style1 = document.createElement ('style') ؛ style1.innerhtml = 'body {color: red} #top: hover {background-color: red ؛ color: white ؛}' ؛ document.head.appendchild (style1) ؛2. طريقة أخرى هي إضافة ورقة أنماط خارجية ، أي إضافة عقدة ارتباط في المستند وتوجه سمة HREF إلى عنوان URL الخاص بملاءات الأنماط الخارجية
var link1 = document.createElement ('link') ؛ link1.setAttribute ('rel' ، 'StylSheet') ؛ link1.setAttribute ('type' ، 'text/css') ؛ link1.setattribute ('href' ، 'reset-min.css') ؛ document.head.appendchild (link1) ؛7. يتم استخدام طريقة window.matchmedia للتحقق من بيان MediaQuery من CSS. تدعم أحدث إصدارات المتصفحات المختلفة (بما في ذلك IE 10+) هذه الطريقة. بالنسبة للمتصفحات القديمة التي لا تدعم هذه الطريقة ، يمكنك استخدام مكتبة وظيفة الطرف الثالث MatchMedia.js ؛
فيما يلي مثال على بيان MediaQuery:
Media All و (Max-Device-Width: 700px) {body {background: #ff0 ؛}}تقبل طريقة Window.MatchMedia سلسلة بيان MediaQuery كمعلمة وإرجاع كائن MediaQueryList. هذا الكائن له الخصائص التالية:
وسائل الإعلام: إرجاع سلسلة بيان MediaQuery الاستعلام.
المطابقات: إرجاع قيمة منطقية تشير إلى ما إذا كانت البيئة الحالية تتطابق مع بيان الاستعلام.
var result = window.matchmedia ('(max-width: 700px)') ؛ if (result.matches) {console.log ('عرض الصفحة أقل من أو يساوي 700px') ؛ } آخر {console.log (عرض الصفحة أكبر من 700px ') ؛ }يحتوي كائن MediaQuerylist الذي تم إرجاعه بواسطة Window.MatchMedia على طريقتين للاستماع للأحداث: طريقة AddListener وطريقة الإزالة. إذا تغيرت نتائج استعلام MediaQuery ، يتم استدعاء وظيفة رد الاتصال المحدد ؛
var mql = window.matchmedia ("(Max-Width: 700px)") ؛ mql.addlistener (mqcallback) ؛ // تحديد وظيفة رد الاتصال mqcallback (mqcallback) ؛ // دالة الاتصال الدالة callback mqcallback (mql) {if (mql.matches) {// width أقل من 700 pixels}إشارات إلى هذه المقالة:
MDN: https://developer.mozilla.org/zh-cn/docs/web/api
Ruan Yifeng JavaScript المرجع: http://javaScript.ruanyifeng.com/dom/css.html
دليل جافا سكريبت موثوق الطبعة السادسة
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.