1. احصل على النمط المضمّن للعنصر
نسخة الكود كما يلي:
var obj = document.getElementById ("test") ؛
ALERT (obj.height + "/n" + obj.width) ؛
// 200px 200px typeof = string تعرض القيمة في سمة النمط
2. احصل على النمط المحسوب
نسخة الكود كما يلي:
var obj = document.getElementById ("test") ؛
var style = null ؛
if (window.getComputedStyle) {
style = window.getComputedStyle (obj ، null) ؛ // غير
} آخر {
النمط = obj.currentStyle ؛ // أي
}
التنبيه ("width =" + style.width + "/nheight =" + style.height) ؛
ملاحظة: إذا لم يتم تعيين عرض وارتفاع العنصر ، فسيتم إرجاع العرض والارتفاع الافتراضي في متصفحات غير IE. أعد السلسلة التلقائية تحت IE
3. احصل على الأنماط المكتوبة بواسطة علامات <Nink> و <style>
نسخة الكود كما يلي:
var obj = document.stylesheets [0] ؛ ]
if (obj.cssrules) {
القاعدة = OBJ.CSSRULES [0] ؛ // noni [Object CSSRULELIST]
} آخر {
القاعدة = obj.rules [0] ؛ // IE [Object CSSRULELIST]
}
ALERT (RULE.STYLE.WIDTH) ؛
يمكن أن تحصل CSSRULES (أو القواعد) على عرض وارتفاع أنماط الخط والارتباط ، ولا يمكن أن تحصل على الأنماط المضمنة والمحسوبة.
ملخص: يمكن للطرق الثلاثة المذكورة أعلاه الحصول على أحجام العناصر الحصول فقط على حجم CSS للعنصر ، ولكن لا يمكن الحصول على الحجم الفعلي للعنصر نفسه. على سبيل المثال ، أضف هوامش داخلية ، وأشرطة التمرير ، والحدود ، إلخ.
4. احصل على الحجم الفعلي للعنصر
1. العميل و ClientHeight
يمكن أن تحصل هذه المجموعة من السمات على حجم المنطقة المرئية للعنصر ، وحجم المساحة التي يشغلها محتوى العنصر والهوامش الداخلية. إرجاع حجم العنصر ، ولكن لا توجد وحدة ، فإن الوحدة الافتراضية هي PX. إذا قمت بتعيين الوحدة بقوة ، مثل 100EM ، فستظل تُرجع حجم PX. (إذا حصلت على CSS ، فسوف تحصل عليه وفقًا للنمط الذي حددته). من أجل الحجم الفعلي لعنصر ، يتم فهم العميل و ClientHeight على النحو التالي:
أ. أضف الحدود دون تغييرات ؛
ب. زيادة الهوامش دون تغيير.
ج. زيادة شريط التمرير ، القيمة النهائية تساوي الحجم الأصلي ناقص حجم شريط التمرير ؛
د. زيادة الهامش الداخلي ، فإن القيمة النهائية تساوي الحجم الأصلي بالإضافة إلى الهامش الداخلي ؛
نسخة الكود كما يلي:
<div id = "test"> </viv>
#امتحان{
خلفية اللون: الأخضر.
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الحدود: الصلبة 5 بكسل أحمر. / * يتوافق مع الفهم ، النتيجة: 200200 */
الهامش: 10px ؛ /* المقابلة لفهم B ، النتيجة: 200،200*/
الحشو: 20 بكسل ؛ /* المقابلة لفهم C ، النتيجة: 240،240*/
الفائض: التمرير ؛ / * المقابلة لفهم d ، النتيجة: 223،223،223 = 200 (حجم CSS) + 40 (هوامش الحدود على كلا الجانبين) - 17 (عرض شريط التمرير) */
}
window.onload = function () {
var obj = document.getElementById ("test") ؛
ALERT (OBJ.CLIENTWIDTH + "،" + obj.clientheight) ؛
} ؛
ملاحظة: إذا لم يتم تعيين عرض وارتفاع أي CSS ، فسيحسب المتصفح غير IE الحجم المحسوب لشريط التمرير والهامش ، بينما سيعود متصفح IE 0 (تم إصلاح IE8).
2. scrollwidth و scrollheight
يمكن لهذه المجموعة من الخصائص الحصول على حجم عنصر محتوى التمرير (المحتوى المرئي). إرجاع حجم العنصر ، الوحدة الافتراضية هي PX. إذا لم يتم ضبط عرض CSS وارتفاعه ، فسوف يحصل على العرض والارتفاع المحسوب. من أجل الحجم الفعلي للعنصر ، يتم فهم Scrollwidth و Scrollheight على النحو التالي:
1. إضافة الحدود ، فإن المتصفحات المختلفة لها تفسيرات مختلفة (فيما يلي طبيعي في IE8 ، لكن IE6 لا يعمل بشكل صحيح):
أ) سيزيد متصفحات Firefox و Opera من حجم الحدود ، 220 × 220
ب) IE ، تتجاهل متصفحات Chrome و Safari حجم الحدود ، 200x200
ج) يعرض متصفح IE فقط ارتفاع محتوىه الأصلي ، 200x18 (IE8 قام بتعديل هذه المشكلة)
2. إضافة الهامش الداخلي ، ستكون القيمة النهائية مساوية للحجم الأصلي بالإضافة إلى حجم الهامش الداخلي ، 220 × 220 ، و IE 220 × 38
3. أضف شريط التمرير ، ستكون القيمة النهائية مساوية للحجم الأصلي ناقص حجم شريط التمرير ، 184x184 ، أي 184x18
4. إضافة البيانات الخارجية ، لا تغييرات.
5. زيادة فيضان المحتوى ، و Firefox ، و chrome و IE ، احصل على ارتفاع المحتوى الفعلي ، والأوبرا أصغر من الارتفاع الذي تم الحصول عليه بواسطة المتصفحات الثلاثة الأولى ، و Safari أكبر من الارتفاع الذي تم الحصول عليه بواسطة المتصفحات الثلاثة الأولى.
3.
يمكن لهذه المجموعة من الخصائص إرجاع الحجم الفعلي للعنصر ، بما في ذلك الحدود والهوامش الداخلية وأشرطة التمرير. إرجاع حجم العنصر ، الوحدة الافتراضية هي PX. إذا لم يتم ضبط عرض CSS وارتفاعه ، فسوف يحصل على العرض والارتفاع المحسوب. من أجل الحجم الفعلي للعنصر ، يتم فهم عرض الإزاحة و Offsetheight على النحو التالي:
1. إضافة الحدود ، ستكون القيمة النهائية مساوية للحجم الأصلي بالإضافة إلى حجم الحدود ، وهو 220 ؛
2. إضافة الهامش الداخلي ، ستكون القيمة النهائية مساوية للحجم الأصلي بالإضافة إلى حجم الهامش الداخلي ، وهو 220 ؛
3. إضافة البيانات الخارجية ، لا تغييرات ؛
4. إضافة أشرطة التمرير ، لا تغييرات ، ولن تنخفض ؛
للحصول على أحجام العناصر ، فهي عمومًا عناصر على مستوى الكتلة وهي أكثر ملاءمة لتعيين عناصر حجم CSS. إنه أمر مزعج بشكل خاص إذا كان عنصرًا مضمّنًا أو عنصرًا لا يحتوي على مجموعة الحجم ، لذلك يوصى بالاهتمام عند استخدامه.
نسخة الكود كما يلي:
<div id = "test"> اختبار عنصر Div </div>
#امتحان{
خلفية اللون: الأخضر.
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الحدود: الصلبة 10 بكسل أحمر. /*النتيجة: 220،220*/
الهامش: 10px ؛ /*النتيجة: 220،220 (بدون تغيير)*/
الحشو: 10 بكسل ؛ /*النتيجة: 240،240*/
الفائض: التمرير ؛ /*النتيجة: 240،240 (بدون تغيير)*/
}
window.onload = function () {
var obj = document.getElementById ("test") ؛
ALERT (OBJ.OFFSETWIDTH + "،" + obj.offsetheight) ؛
} ؛
5. احصل على الحجم المحيط بالعنصر
1. Clientleft و ClientTop يحصلون على حجم الحدود
هذه المجموعة من السمات يمكن أن تحصل على حجم العنصر تعيين الحدود اليسرى والحدود العلوية. حاليًا ، تتوفر المجموعات اليسرى والأعلى فقط ، ولا تتوفر اليمين والسفلي. إذا كان عرض الجوانب الأربعة مختلفة ، فيمكنك الحصول عليه مباشرة من خلال النمط المحسوب ، أو استخدام المجموعات الثلاث المذكورة أعلاه للحصول على حجم العنصر للحصول على الطرح.
عرض الحدود اليمنى: obj.offsetwidth-obj.clientwidth-obj.clientleft
عرض الحدود السفلية: obj.offsetheight-obj.clientheight-obj.clienttop
نسخة الكود كما يلي:
<div id = "test"> اختبار عنصر Div </div>
#امتحان{
خلفية اللون: الأخضر.
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
أعلى الحدود: Red 10px Red ؛ S
اليمين الحدودي: Solid 20px #00ff00 ؛
القاع الحدودي: Solid 30px Blue ؛
الحدود اليسرى: صلبة 40 بكسل #808080 ؛
}
window.onload = function () {
var obj = document.getElementById ("test") ؛
ALERT (OBJ.CLIENTLEFT + "،" + obj.clienttop) ؛ // 40،10
} ؛
2.
هذه المجموعة من السمات يمكن أن تحصل على موضع العنصر الحالي بالنسبة للعنصر الأصل. للحصول على الموضع الحالي للعنصر بالنسبة للعنصر الأصل ، من الأفضل ضبطه على الموضع: المطلق ؛ وإلا فإن المتصفحات المختلفة سيكون لها تفسيرات مختلفة.
أ. تعيين الموقف على المطلق ، جميع المتصفحات تعيد نفس القيمة. يحب:
نسخة الكود كما يلي:
<div id = "test"> اختبار عنصر Div </div>
#امتحان{
خلفية اللون: الأخضر.
العرض: 200 بكسل ؛
الارتفاع: 200 بكسل ؛
الموقف: مطلق ؛
اليسار: 30 بكسل ؛
أعلى: 20 بكسل ؛
}
window.onload = function () {
var obj = document.getElementById ("test") ؛
ALERT (OBJ.OFFSETLEFT + "،" + obj.offsettop) ؛ // 30 ، 20
} ؛
ب. لن تؤثر إضافة الحدود والهامش الداخلي على موضعها ، ولكن إضافة البيانات الخارجية سوف تتراكم.
3. box.OffSetParent يحصل على العنصر الأصل
في OffsetParent ، إذا كان العنصر الأصل نفسه هو <Body> ، فإن Non INE يعيد كائن الجسم ، و IE (IE6) يعيد كائن HTML. إذا تم تداخل عنصرين ، إذا لم يتم استخدام موضع تحديد المواقع: لا يتم استخدام المطلق على العنصر الأصل ، فسيعود إزاحة OffsetParent كائن الجسم أو كائن HTML. لذلك ، عند الحصول على OffseStleft و Offsettop ، فإن وضع CSS مهم للغاية.
إذا تم وضع الطبقة الخارجية في العديد من المستويات ، فكيف يمكننا الحصول على المسافة بين العناصر في الطبقة الداخلية من عناصر الجسم أو HTML؟ وهذا هو ، احصل على موقع أي عنصر من الصفحة. ثم يمكننا كتابة وظائف وتحقيقها عن طريق التراجع باستمرار لأعلى للحصول على التراكم.
نسخة الكود كما يلي:
box.offsettop + box.offsetparent.offsettop ؛ // عندما يكون هناك طبقتان فقط
وظيفة الإزاحة (العنصر) {
var left = element.OffSetLeft ؛ // احصل على مسافة الطبقة الأولى
var parent = element.OffSetParent ؛ // احصل على العنصر الوالد الأول
بينما (الأصل! == فارغ) {// إذا كان هناك عنصر الوالد السابق
اليسار += parent.offsetLeft ؛ // أضف مسافات هذه الطبقة
parent = parent.OffSetParent ؛ // احصل على العنصر الأصل في هذه الطبقة
} // ثم تابع الحلقة
العودة إلى اليسار
}
4. scrolltop و scrollleft
يمكن أن تحصل هذه المجموعة من الخصائص على حجم مساحة شريط التمرير الذي يتم إخفاؤه (المنطقة الموجودة فوق شريط التمرير) ، أو تعيينها لتضعه في تلك المنطقة. إذا كنت ترغب في تمرير شريط التمرير إلى موضعه الأولي ، يمكنك كتابة وظيفة:
نسخة الكود كما يلي:
وظيفة scrollstart (element) {
if (element.scrolltop! = 0) {
element.scrolltop = 0 ؛
}
}
5. getBoundingClientRect ()
تقوم هذه الطريقة بإرجاع كائن مستطيل بأربع خصائص: يسار ، أعلى ، يمين ، وأسفل. إنه يشير إلى المسافة بين كل حافة العنصر والجانب العلوي والأيسر من الصفحة.
نسخة الكود كما يلي:
var box = document.getElementById ('box') ؛ // احصل على عنصر
التنبيه (box.getBoundingClientRect (). أعلى) ؛ // المسافة أعلى العنصر هي من أعلى الصفحة
تنبيه (box.getBoundingClientRect (). اليمين) ؛ // المسافة إلى يمين العنصر من يسار الصفحة
التنبيه (box.getBoundingClientRect (). أسفل) ؛ // المسافة أسفل العنصر من أعلى الصفحة
تنبيه (box.getBoundingClientRect (). اليسار) ؛ // المسافة إلى يسار العنصر من يسار الصفحة
ملاحظة: IE ، Firefox3+، Opera9.5 ، Chrome ، و Safari Support. في IE ، يتم حساب الإحداثيات الافتراضية من (2 ، 2) ، مما يؤدي إلى المسافة النهائية من بكلين أكثر من المتصفحات الأخرى. نحن بحاجة إلى أن نكون متوافقين.
نسخة الكود كما يلي:
document.documentElement.clienttop ؛ // is is 0 ، أي هو 2
document.documentElement.clientleft ؛ // is is 0 ، أي هو 2
وظيفة ggetRect (العنصر) {
var rect = element.getBoundingClientRect () ؛
var top = document.documentElement.clienttop ؛
var left = document.documentElement.clientleft ؛
يعود{
أعلى: rect.top - TOP ،
أسفل: rect.bottom - TOP ،
اليسار: rect.left - اليسار ،
اليمين: Rect.Right - اليسار
}
}
أضف الحواف الخارجية والهوامش الداخلية والحدود وأشرطة التمرير على التوالي لاختبار ما إذا كانت جميع المتصفحات متسقة.
ما سبق هو كل المحتوى الموضح في هذه المقالة. أتمنى أن يعجبك.