جافا سكريبت الحصول على مثال رمز نمط CSS العنصر

هناك أربع طرق لاستخدام CSS للتحكم في الصفحة، وهي النمط المضمن (النمط المضمن)، والنمط المضمن، ونمط الارتباط، والنمط المستورد.

تتم كتابة الأنماط المضمنة (الأنماط المضمنة) في سمة النمط في علامة html، مثل <div></div>

تتم كتابة الأنماط المضمنة في علامة النمط، مثل <style type="text/css">div{width:100px height:100px</style>

نوع الرابط هو استخدام علامة الارتباط لتقديم ملف CSS، مثل <link href="test.css" type="text/css" rel="stylesheet" />

طريقة الاستيراد هي استخدام الاستيراد لتقديم ملف CSS، مثل @import url("test.css")

إذا كنت تريد استخدام JavaScript للحصول على معلومات النمط الخاصة بعنصر ما، فإن أول ما يتبادر إلى ذهنك هو سمة النمط الخاصة بالعنصر. ومع ذلك، فإن سمة النمط الخاصة بعنصر ما تمثل فقط النمط السطري للعنصر، إذا تمت كتابة جزء من معلومات النمط الخاص بالعنصر بالنمط السطري وتم كتابة الجزء الآخر في ملف CSS خارجي، فلا يمكن الحصول على معلومات النمط الكاملة للعنصر. يمكن الحصول عليها من خلال سمة النمط. لذلك، تحتاج إلى استخدام النمط المحسوب للعنصر للحصول على معلومات النمط الخاصة بالعنصر.

استخدم طريقة getComputedStyle لكائن النافذة للحصول على النمط المحسوب للعنصر. تحتوي هذه الطريقة على معلمتين. المعلمة الأولى هي العنصر الذي سيتم الحصول على النمط المحسوب له. يمكن أن تكون المعلمة الثانية فارغة أو سلسلة فارغة أو زائفة. class (مثل: قبل،:بعد)، كلا المعلمتين مطلوبتان.

دعونا نعطي مثالا

<نمط النوع = "نص/CSS">

#testDiv{

الحدود: 1 بكسل أحمر خالص؛

العرض: 100 بكسل؛

الارتفاع: 100 بكسل؛

اللون: أحمر؛

}

</نمط>

<div id="testDiv"></div>

var testDiv = document.getElementById("testDiv");

var computedStyle = window.getComputedStyle(testDiv, "");

var width = computedStyle.width;//100px

فار الارتفاع = computedStyle.height;

فار اللون = computedStyle.color //rgb(255, 0, 0)

[/شفرة]

ملاحظة: يتم إرجاع جميع سمات اللون التي تم الحصول عليها بتنسيق rgb(#,#,#).

في هذا الوقت، إذا كنت تستخدم testDiv.style للحصول على معلومات النمط، فسيكون testDiv.style.width فارغًا بالتأكيد.

لم يتم تنفيذ أسلوب getComputedStyle في IE8 والإصدارات السابقة، ولكن كل عنصر في IE له خاصيةcurrentStyle الخاصة به.

لذا، دعونا نحصل على فكرة عامة

انسخ رمز الكود كما يلي:

var testDiv = document.getElementById("testDiv");

var styleInfo = window.getComputedStyle ? window.getComputedStyle(testDiv, "") : testDiv.currentStyle;

عرض فار = styleInfo.width;

ارتفاع فار = styleInfo.height;

فار اللون = styleInfo.color // rgb(255, 0, 0)

أخيرًا، يرجى ملاحظة أن النمط المحسوب للعنصر هو للقراءة فقط. إذا كنت تريد تعيين نمط العنصر، فيجب عليك استخدام سمة النمط الخاصة بالعنصر (هذا هو الغرض الحقيقي من سمة النمط الخاصة بالعنصر). .