موضوع HTML DOM Style

Style Object

يُمثل Style Object بيانات التصميم الفريد.

خصائص Style Object

الخصائص الوصف
alignContent إعداد أو العودة إلى طريقة التوجيه بين السطور في الحاوية المربعة، عند عدم استخدام جميع المساحات المتاحة.
alignItems إعداد أو العودة إلى طريقة التوجيه للعناصر داخل الحاوية المربعة.
alignSelf إعداد أو العودة إلى طريقة التوجيه للعناصر المحددة داخل الحاوية المربعة.
animation الخصائص القصيرة لجميع خصائص التحرك، باستثناء خاصية animationPlayState.
animationDelay إعداد أو العودة إلى وقت بدء التحرك.
animationDirection إعداد أو العودة إلى ما إذا كان التحرك يلعب في اتجاه عكسي في دورة التبديل.
animationDuration إعداد أو العودة إلى عدد الثواني أو الألفيات المطلوبة لإنهاء دورة التحرك.
animationFillMode إعداد أو العودة إلى القيمة التطبيقية خارج وقت التنفيذ للتحرك.
animationIterationCount إعداد أو العودة إلى عدد مرات العرض للتحرك.
animationName إعداد أو العودة إلى اسم @keyframes للتحرك.
animationPlayState إعداد أو العودة إلى ما إذا كانت التحرك قيد التشغيل أم معلق.
animationTimingFunction إعداد أو العودة إلى مسار السرعة للتحرك.
background إعداد أو العودة إلى جميع خصائص الخلفية في بيان واحد.
backgroundAttachment إعداد أو العودة إلى ما إذا كانت صورة الخلفية ثابتة أم تتغير مع تمرير الصفحة.
backgroundClip إعداد أو العودة إلى منطقة الرسم للخلفية.
backgroundColor إعداد أو العودة إلى لون الخلفية للعنصر.
backgroundImage إعداد أو العودة إلى صورة الخلفية للعنصر.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition 设置或返回背景图像的起始位置。
إعداد أو العودة إلى منطقة التركيز للصورة الخلفية. backgroundPosition
إعداد أو العودة إلى موقع البداية للصورة الخلفية. backgroundRepeat
إعداد أو العودة إلى كيفية تكرار (الخزف) لصورة الخلفية. backgroundSize
إعداد أو العودة إلى حجم صورة الخلفية. backfaceVisibility
إعداد أو العودة إلى ما إذا كان العنصر مرئيًا عندما يكون غير مواجه الشاشة. borderBottom
إعداد أو العودة إلى جميع خصائص borderBottom في بيانة واحدة. borderBottomColor
إعداد أو العودة إلى لون الحافة السفلية. borderBottomLeftRadius
إعداد أو العودة إلى شكل الحافة في الزاوية السفلية اليسرى. borderBottomRightRadius
إعداد أو العودة إلى شكل الحافة في الزاوية السفلية اليمنى. إعداد أو العودة إلى نمط الحافة السفلية.
borderBottomWidth إعداد أو العودة إلى عرض الحافة السفلية.
borderCollapse إعداد أو العودة إلى ما إذا كان يجب تقليص حافة الجدول إلى حافة واحدة.
borderColor إعداد أو العودة إلى لون حافة العنصر (يمكن إعداد أقصى四 قيم).
borderImage خصائص مختصرة لضبط أو العودة إلى جميع خصائص borderImage.
borderImageOutset إعداد أو العودة إلى مقدار الحافة للصورة الذي يتجاوز box الحافة.
borderImageRepeat إعداد أو العودة إلى ما إذا كان يجب تكرار أو لف أو تمدد حافة الصورة.
borderImageSlice إعداد أو العودة إلى الزيادة الداخلية للحافة للصورة.
borderImageSource إعداد أو العودة إلى الصورة المستخدمة كحافة.
borderImageWidth إعداد أو العودة إلى عرض الحافة للصورة.
borderLeft إعداد أو العودة إلى جميع خصائص الحافة اليسرى في بيانة واحدة.
borderLeftColor إعداد أو العودة إلى لون الحافة اليسرى.
borderLeftStyle إعداد أو العودة إلى نمط الحافة اليسرى.
borderLeftWidth إعداد أو العودة إلى عرض الحافة اليسرى.
borderRadius خصائص مختصرة لضبط أو العودة إلى جميع خصائص borderRadius لأربعة جوانب.
borderRight إعداد أو العودة إلى جميع خصائص الحافة اليمنى في بيانة واحدة.
borderRightColor إعداد أو العودة إلى لون الحافة اليمنى.
borderRightStyle تعيين أو العودة إلى نمط الهوامش اليمنى.
borderRightWidth تعيين أو العودة إلى عرض عرض الهوامش اليمنى.
borderSpacing تعيين أو العودة إلى المسافة بين الخلايا في الجدول.
borderStyle تعيين أو العودة إلى نمط الهوامش للعنصر (يمكن تعيين أربعة قيم كحد أقصى).
borderTop تعيين أو العودة إلى جميع خصائص borderTop في بيانات واحدة.
borderTopColor تعيين أو العودة إلى لون الهوامش العلوية.
borderTopLeftRadius تعيين أو العودة إلى شكل الهوامش اليسرى العلوية.
borderTopRightRadius تعيين أو العودة إلى شكل الهوامش右上.
borderTopStyle تعيين أو العودة إلى نمط الهوامش العلوية.
borderTopWidth تعيين أو العودة إلى عرض عرض الهوامش العلوية.
borderWidth تعيين أو العودة إلى عرض عرض الهوامش للعنصر (يمكن تعيين أربعة قيم كحد أقصى).
bottom تعيين أو العودة إلى موقع القاعدة للعنصر المرتبط.
boxDecorationBreak تعيين أو العودة إلى سلوك الخلفية والهوامش للعنصر عند الصفحة أو السطر الداخلي.
boxShadow إضافة ظل واحد أو أكثر إلى الصندوق (box).
boxSizing يسمح لك بتعريف بعض العناصر لتتناسب بطرق معينة مع منطقة معينة.
captionSide تعيين أو العودة إلى موقع عنوان الجدول.
caretColor تعيين أو العودة إلى لون المؤشر/الشريط.
clear تعيين أو العودة إلى موقع العنصر بالنسبة للموضوعات العائمة.
clip تعيين أو العودة إلى جزء العنصر المرتبط الذي يجب أن يكون مرئياً.
color تعيين أو العودة إلى لون النص.
columnCount تعيين أو العودة إلى عدد الأعمدة التي يجب تقسيم العنصر.
columnFill تعيين أو العودة إلى كيفية تعبئة الأعمدة.
columnGap تعيين أو العودة إلى الفجوة بين الأعمدة.
columnRule لإعداد أو العودة إلى ميزة اختصار تعيين أو العودة إلى جميع خصائص columnRule.
columnRuleColor تعيين أو العودة إلى لون النسيج بين الأعمدة.
columnRuleStyle تعيين أو العودة إلى نمط النسيج بين الأعمدة.
columnRuleWidth تعيين أو العودة إلى عرض عرض النسيج بين الأعمدة.
columns لإعداد أو العودة إلى ميزة اختصار تعيين أو العودة إلى عرض عرض الأعمدة وعدد الأعمدة.
columnSpan تعيين أو العودة إلى عدد الأعمدة التي يجب أن تتخطى العنصر.
columnWidth تعيين أو العودة إلى عرض عرض الأعمدة.
content استخدامها مع伪 عناصر :before و :after، لإدراج محتوى تم إنشاؤه.
counterIncrement زيادة عدد من ميزات الحساب.
counterReset إنشاء أو إعادة تعيين عدد من ميزات الحساب.
cursor تعيين أو العودة إلى نوع الماوسنقطة التي تظهر عند وضع النقطة.
direction تعيين أو العودة إلى اتجاه النص.
display تعيين أو العودة إلى نوع العرض للعنصر.
emptyCells تعيين أو العودة إلى ما إذا كان يجب عرض حدود الخلايا الفارغة وملء الخلفية.
filter تعيين أو العودة إلى مرشح الصورة (تأثيرات مرئية مثل الحجب والسطوع).
flex تعيين أو العودة إلى الطول للعنصر بالنسبة للباقي.
flexBasis تعيين أو العودة إلى الطول الأولي للعنصر المرونة.
flexDirection تعيين أو العودة إلى اتجاه العنصر المرونة.
flexFlow خصائص اختصار flexDirection و flexWrap.
flexGrow تعيين أو العودة إلى كيفية الزيادة للعنصر بالنسبة للعناصر الأخرى.
flexShrink تعيين أو العودة إلى كيفية التقلص للعنصر بالنسبة للعناصر الأخرى.
flexWrap تعيين أو العودة إلى ما إذا كان يجب تمرير العنصر على سطر جديد.
cssFloat تعيين أو العودة إلى طريقة التثبيت الأفقية للعنصر.
font تعيين أو العودة إلى خصائص الخط في بيان واحد.
fontFamily تعيين أو العودة إلى عائلة الخط النصي.
fontSize تعيين أو العودة إلى حجم الخط النصي.
fontStyle تعيين أو العودة إلى أسلوب الخط (normal، italic أو oblique).
fontVariant تعيين أو العودة إلى ما إذا كان يجب عرض الخط بتنسيق صغير أو كبير.
fontWeight تعيين أو العودة إلى سمك الخط.
fontSizeAdjust حفظ قابلية قراءة النص عند حدوث تراجع في الخطوط.
fontStretch اختيار طريقة التمدد للخط من مجموعة الخطوط.
hangingPunctuation تحديد ما إذا كان يمكن وضع العلامات المقطوعية خارج الحاوية للسطر.
height تعيين أو العودة إلى الارتفاع العنصر.
hyphens تعيين كيفية تقسيم الكلمات لتحسين ترتيب المقطوع.
icon تمكين المؤلف من استخدام مثيلات رمزية لتحديد أسلوب العنصر.
imageOrientation تحديد دوران الصورة إلى اليمين أو الزاوية السعيدة.
isolation تحديد ما إذا كان العنصر يجب إنشاء محتوى تراكمي جديد أم لا.
justifyContent عندما لا يستخدم العنصر جميع المساحات المتاحة، تعيين أو العودة إلى طريقة التثبيت بين العناصر داخل وعاء المرونة.
left تعيين أو العودة إلى موضع اليسار للعنصر المحدد.
letterSpacing يُحدد أو يُرجع المسافة بين الحروف في النص.
lineHeight يُحدد أو يُرجع المسافة بين السطور في النص.
listStyle يُحدد أو يُرجع النمط الخاص بالقائمة في بيان واحد.
listStyleImage يُحدد أو يُرجع الصورة كعلامة للاعتماد.
listStylePosition يُحدد أو يُرجع موقع علامة العنصر في القائمة.
listStyleType يُحدد أو يُرجع نوع علامة العنصر في القائمة.
margin يُحدد أو يُرجع الهامش الخارجي للعنصر (يمكن تحديد أقصى أربعة قيم).
marginBottom يُحدد أو يُرجع الهامش الخارجي السفلي للعنصر.
marginLeft يُحدد أو يُرجع الهامش الخارجي اليسرى للعنصر.
marginRight يُحدد أو يُرجع الهامش الخارجي الأيمن للعنصر.
marginTop يُحدد أو يُرجع الهامش الخارجي العلوى للعنصر.
maxHeight يُحدد أو يُرجع الارتفاع الأقصى للعنصر.
maxWidth يُحدد أو يُرجع العرض الأقصى للعنصر.
minHeight يُحدد أو يُرجع الارتفاع الأدنى للعنصر.
minWidth يُحدد أو يُرجع العرض الأدنى للعنصر.
navDown يُحدد أو يُرجع موقع التنقل عند استخدام مفتاح التنقل إلى الأسفل.
navIndex يُحدد أو يُرجع ترتيب التنقل للعنصر.
navLeft يُحدد أو يُرجع موقع التنقل عند استخدام مفتاح التنقل إلى اليسار.
navRight يُحدد أو يُرجع موقع التنقل عند استخدام مفتاح التنقل إلى اليمين.
navUp يُحدد أو يُرجع موقع التنقل عند استخدام مفتاح التنقل للأعلى.
objectFit يُحدد كيف يجب أن تتوافق محتويات العنصر مع الإطار الذي يُحدده الطول والعرض المستخدمين.
objectPosition يُحدد كيفية توجيه العنصر المحلل في إطار العنصر.
opacity يُحدد أو يُرجع مستوى الشفافية للعنصر.
order يُحدد أو يُرجع ترتيب العنصر بين العناصر المتبقية.
orphans يُحدد أو يُرجع عدد الأطراف الأدنى التي يجب أن تبقى في أسفل الصفحة عند تحديد الصفحة.
outline يُحدد أو يُرجع جميع خصائص الهامش في بيان واحد.
outlineColor يُحدد أو يُرجع اللون المستخدم في الهوامش حول العنصر.
outlineOffset يُتحرك الهامش حول الهوامش ويُرسم خارج حافة الهوامش.
outlineStyle يُحدد أو يُرجع النمط المستخدم في الهوامش حول العنصر.
outlineWidth يُحدد أو يُرجع عرض الهوامش حول الهيكل العنصر.
overflow يُحدد أو يُرجع كيفية معالجة المحتوى الذي يتم عرضه خارج نطاق العنصر.
overflowX يُحدد كيفية معالجة الهوامش اليمنى واليسرى للمحتوى إذا تجاوزت منطقة محتوى العنصر.
overflowY تحديد كيفية التعامل مع الحواف العلوية والسفلية للمحتوى، إذا كان يخرج من منطقة المحتوى للعنصر.
padding إعداد أو العودة إلى الهوامش للعنصر (يمكن إعداد أقصى أربعة قيم).
paddingBottom إعداد أو العودة إلى الهوامش السفلية للعنصر.
paddingLeft إعداد أو العودة إلى الهوامش اليسرى للعنصر.
paddingRight إعداد أو العودة إلى الهوامش اليمنى للعنصر.
paddingTop إعداد أو العودة إلى الهوامش العلوية للعنصر.
pageBreakAfter إعداد أو العودة إلى سلوك الصفحة بعد العنصر.
pageBreakBefore إعداد أو العودة إلى سلوك الصفحة قبل العنصر.
pageBreakInside إعداد أو العودة إلى سلوك الصفحة للعنصر.
perspective إعداد أو العودة إلى كيفية عرض العنصر 3D.
perspectiveOrigin إعداد أو العودة إلى موضع القاعدة للعنصر 3D.
position إعداد أو العودة إلى نوع الطريقة المستخدمة للتعيين العنصر (ثابت، نسبي، مطلق أو ثابت).
quotes إعداد أو العودة إلى نوع العلامات التي تستخدم لتقديم النص.
resize إعداد أو العودة إلى ما إذا كان العنصر يمكن تمريره أو تغيير حجمه.
right إعداد أو العودة إلى المواضع الأيمن للعنصر.
scrollBehavior تحديد ما إذا كان هناك تأثير حركي منسق عند النقر على رابط داخل حاوية قابلة للتمدد، بدلاً من التحرك مباشرة.
tableLayout إعداد أو العودة إلى كيفية ترتيب خلايا الجدول، السطور والصفوف.
tabSize إعداد أو العودة إلى طول الحصة.
textAlign إعداد أو العودة إلى طريقة التضارب الأفقية للنص.
textAlignLast عند استخدام text-align مع "justify"، إعداد أو العودة إلى كيفية تضارب سطر آخر أو قبل السطر الإجباري.
textDecoration إعداد أو العودة إلى تزيين النص.
textDecorationColor إعداد أو العودة إلى لون تزيين النص.
textDecorationLine إعداد أو العودة إلى نوع الخط في تزيين النص.
textDecorationStyle إعداد أو العودة إلى نمط الخط في تزيين النص.
textIndent إعداد أو العودة إلى الهوامش الأولى للنص.
textJustify إعداد أو العودة إلى طريقة التضارب المستخدمة عند استخدام text-align مع "justify".
textOverflow إعداد أو العودة إلى ما يجب أن يحدث عند انسياب النص داخل العنصر.
textShadow إعداد أو العودة إلى تأثير الظل على النص.
textTransform ضبط أو إرجاع حجم النص.
top ضبط أو إرجاع موقع العنصر المحدد في الوجهة العليا.
transform تطبيق تحويل 2D أو 3D على العنصر.
transformOrigin ضبط أو إرجاع موقع العنصر المحول.
transformStyle ضبط أو إرجاع كيفية عرض العناصر المدمجة في الفضاء الثلاثي الأبعاد.
transition يُستخدم لضبط أو إرجاع مختصر لأربعة خصائص تحويل.
transitionProperty ضبط أو إرجاع الخاصية CSS لل تأثيرات الإنتقالية.
transitionDuration ضبط أو إرجاع الوقت المطلوب لإنهاء تأثير الإنتقال.
transitionTimingFunction ضبط أو إرجاع سيناريو السرعة لل تأثيرات الإنتقالية.
transitionDelay ضبط أو إرجاع وقت بدء التأثيرات الإنتقالية.
unicodeBidi ضبط أو إرجاع ما إذا كان يجب تغطية النص لدعم لغات متعددة في نفس الوثيقة.
userSelect ضبط أو إرجاع ما إذا كان يمكن اختيار نص العنصر.
verticalAlign ضبط أو إرجاع ترتيب العمودي للمحتوى في العنصر.
visibility ضبط أو إرجاع ما إذا كان العنصر مرئيًا.
whiteSpace ضبط أو إرجاع كيفية معالجة التاب، النسخة والفضاءات في النص.
width ضبط أو إرجاع عرض العنصر.
wordBreak ضبط أو إرجاع قواعد الطباعة للنص غير الـ CJK.
wordSpacing ضبط أو إرجاع مسافة الكلمات في النص.
wordWrap يسمح للكلمات الطويلة غير المنقوصة بأن تنقسم وتنتقل إلى السطر التالي.
widows ضبط أو إرجاع أقل عدد من الأسطر التي يجب أن تكون مرئية في الصفحة العليا.
zIndex ضبط أو إرجاع ترتيب الأعمدة لـ الموضوع المحدد.

زيارة موضوع النمط

يمكن زيارة موضوع النمط من جزء الرأس في الوثيقة أو عنصر HTML محدد.

مثال 1

زيارة موضوع النمط من جزء الرأس في الوثيقة:

var x = document.getElementsByTagName("STYLE");

تجربة شخصية

مثال 2

زيارة موضوع النمط المحدد:

var x = document.getElementById("myH1").style;

تجربة شخصية

إنشاء عنصر Style

مثال 1

يمكنك استخدام طريقة document.createElement() لإنشاء عنصر <style> :

var x = document.createElement("STYLE");

تجربة شخصية

مثال 2

يمكنك أيضًا تعيين خصائص النمط للعناصر الموجودة بالفعل:

document.getElementById("myH1").style.color = "red";

تجربة شخصية

الصفحات ذات الصلة

دليل تعليمي لـ HTML:HTML CSS

دليل تعليمي لـ CSS:دليل CSS

دليل مرجعي لـ HTML:علامة <style> لـ HTML

دليل مرجعي لـ CSS:خصائص CSS