الفرق بين المراجعتين لصفحة: «jQuery/css»
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 165: | سطر 165: | ||
يُسرِّع ويُسهِّل التّابع <code>.css()</code> من تعيين خاصيّات العناصر، كما هو الحال مع التّابع <code>[[jQuery/prop|.prop()]]</code>. يُمكِن للتّابع <code>.css()</code> أن يأخذ إمّا اسم الخاصيّة وقيمتها كمُعامِلات منفصلة، أو كائن مُفرد من أزواج خاصيّة-قيمة. | يُسرِّع ويُسهِّل التّابع <code>.css()</code> من تعيين خاصيّات العناصر، كما هو الحال مع التّابع <code>[[jQuery/prop|.prop()]]</code>. يُمكِن للتّابع <code>.css()</code> أن يأخذ إمّا اسم الخاصيّة وقيمتها كمُعامِلات منفصلة، أو كائن مُفرد من أزواج خاصيّة-قيمة. | ||
تستطيع jQuery أيضًا تفسير تنسيق DOM و CSS للخاصيّات التي يتألف اسمها من كلمات متعدّدة، فعلى سبيل المثال تفهم jQuery وتُعيد القيمة الصحيحة لـ <code>.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })</code> و <code>.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })</code>. لاحظ أنّه في DOM تكون علامات الاقتباس حول اسم الخاصيّة اختياريّة، أما في CSS فهي إجباريّة نظرًا لوجود | تستطيع jQuery أيضًا تفسير تنسيق DOM و CSS للخاصيّات التي يتألف اسمها من كلمات متعدّدة، فعلى سبيل المثال تفهم jQuery وتُعيد القيمة الصحيحة لـ <code>.css({ "background-color": "#ffe", "border-left": "5px solid #ccc" })</code> و <code>.css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" })</code>. لاحظ أنّه في DOM تكون علامات الاقتباس حول اسم الخاصيّة اختياريّة، أما في CSS فهي إجباريّة نظرًا لوجود الشَّرْطَة (hyphen) في اسم الخاصيّة. | ||
عند تمرير عدد كقيمة، ستُحوِّله jQuery إلى سلسلة نصيّة وتُضيف <code>px</code> إلى نهاية هذه السّلسلة. وإن كانت الخاصيّة تحتاج إلى واحدات أخرى مختلفة عن <code>px</code>، فستُحوِّل القيمة إلى سلسلة نصيّة وتُضيف الواحدة المناسبة قبل استدعاء التّابع. | |||
مراجعة 03:34، 1 يونيو 2018
يُستخدَم التابع .css() في الحصول على قيمة خاصيّة تنسيق محسوبة (computed style property) للعنصر الأول من مجموعة العناصر المُطابِقة أو تعيين واحدة أو أكثر من خاصيّات CSS لكل عنصر مُطابِق.
.css( propertyName )
القيمة المعادة
الوصف
الحصول على خاصيّات التنسيق المحسوبة للعنصر الأول من مجموعة العناصر المُطابِقة.
.css( propertyName )
أضيفت في الإصدار: 1.0.
propertyName
سلسلة نصيّة، وتُمثِّل اسم خاصيّة CSS.
.css( propertyNames )
أضيفت في الإصدار: 1.9.
propertyNames
مصفوفة، وتُمثِّل مصفوفة من خاصيّات CSS.
يُعد التابع .css() طريقة مثاليّة للحصول على خاصيّة تنسيق محسوبة للعنصر المُطابِق الأول، خاصّة في ضوء الطرق المختلفة التي تصل فيها المتصفحات لهذه الخاصيّات (التّابع getComputedStyle() وهو التّابع المعياري الذي تعتمد عليه المتصفحات، مقابل الخاصيّات currentStyle و runtimeStyle في متصفح Internet Explorer قبل الإصدار 9) والمصطلحات المختلفة التي تستخدمها المتصفحات لبعض الخاصيّات، على سبيل المثال يُشير تنفيذ DOM في متصفّح Internet Explorer إلى الخاصيّة float بالاسم styleFloat، بينما تُشير المتصفّحات المتوافقة مع معايير W3C إليها بالاسم cssFloat. تستطيع للسهولة أن تستخدم ببساطة float، وستترجمها jQuery إلى القيمة الصحيحة بالنسبة لكل متصفّح.
تستطيع jQuery أيضًا تفسير تنسيق DOM و CSS للخاصيّات مُتعدّدة الكلمات بشكلٍ متساوٍ، فعلى سبيل المثال تفهم وتُعيد jQuery القيمة الصحيحة لـ .css( "background-color" ) و .css( "backgroundColor" )، ويعني هذا أنّ دمج حالة الأحرف يمتلك معنى مختلف لكل حالة، فلن يكون لـ .css( "WiDtH" ) نفس فعل استخدام .css( "width" ) مثلًا.
لاحظ أنّ التنسيق المحسوب للعنصر قد لا يكون مماثلًا للقيمة المُحدَّدة لهذا العنصر في ملف التنسيقات، فمثلًا تكون التنسيقات المحسوبة للأبعاد دومًا بالبكسل ولكن يُمكِن تحديدها في ملف التنسيقات بواحدات أخرى مثل em، و ex، و px، و %. قد تُعيد المتصفّحات المختلفة قيم ألوان CSS متساوية منطقيًّا ولكن غير متساوية نصيًّا، مثل #FFF، و #ffffff، و rgb(255,255,255).
يكون استرجاع خاصيّات CSS المختصرة (مثل margin، و background، و border) غير مضمونًا مع أنّه فعّال في بعض المتصفّحات، فمثلًا إن أردنا استرجاع الخاصيّة border-width نستخدم $( elem ).css( "borderTopWidth" )، و $( elem ).css( "borderBottomWidth" )، وهكذا.
يجب أن يكون العنصر مُتصلًا بـ DOM عند استدعاء التّابع .css() عليه، وإن لم يكن كذلك فقد ترمي jQuery خطأً.
بدءًا من إصدار jQuery 1.9 أصبح تمرير مصفوفة من خاصيّات التنسيق إلى التّابع .css() ينتج عنه كائن من أزواج قيمة-خاصيّة، فمثلًا للحصول على قيم الحدود الأربعة للخاصيّة border-width بإمكاننا استخدام: $( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])
أمثلة
الحصول على لون الخلفيّة لعنصر <div> عند النقر عليه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css مثال عن التابع</title>
<style>
div {
width: 60px;
height: 60px;
margin: 5px;
float: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
<script>
$( "div" ).click(function() {
var color = $( this ).css( "background-color" );
$( "#result" ).html( "لون عنصر div <span style='color:" +
color + ";'>" + color + "</span>." );
});
</script>
</body>
</html>
الحصول على العرض، والارتفاع، ولون النص، ولون الخلفيّة لعنصر <div> عند النقر عليه:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css مثال عن التابع</title>
<style>
div {
height: 50px;
margin: 5px;
padding: 5px;
float: left;
}
#box1 {
width: 50px;
color: yellow;
background-color: blue;
}
#box2 {
width: 80px;
color: rgb(255, 255, 255);
background-color: rgb(15, 99, 30);
}
#box3 {
width: 40px;
color: #fcc;
background-color: #123456;
}
#box4 {
width: 70px;
background-color: #f11;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p id="result"> </p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
<script>
$( "div" ).click(function() {
var html = [ "يمتلك عنصر div الذي ضغطت عليه التنسيقات التالية:" ];
var styleProps = $( this ).css([
"width", "height", "color", "background-color"
]);
$.each( styleProps, function( prop, value ) {
html.push( prop + ": " + value );
});
$( "#result" ).html( html.join( "<br>" ) );
});
</script>
</body>
</html>
.css( propertyName, value )
القيمة المعادة
كائن jQuery.
الوصف
تعيين واحدة أو أكثر من خاصيّات CSS لمجموعة العناصر المُطابِقة.
.css( propertyName, value )
أضيفت في الإصدار: 1.0.
propertyName
سلسلة نصيّة، وتُمثِّل اسم خاصيّة CSS.
value
سلسلة نصيّة أو عدد، وتُمثِّل القيمة المطلوب تعيينها لخاصيّة CSS.
.css( propertyName, function )
أضيفت في الإصدار: 1.4.
propertyName
سلسلة نصيّة، وتُمثِّل اسم خاصيّة CSS.
function
دالة على الشكل Function( Integer index, String value )، تُعيد سلسلة نصيّة أو عدد، وتُمثِّل دالة تُعيد القيمة المطلوب تعيينها، يُشير this إلى العنصر الحالي. تستقبل هذه الدالة موقع فهرس العنصر في المجموعة والقيمة السّابقة كوسائط لها.
.css( properties )
أضيفت في الإصدار: 1.0.
properties
كائن مُجرَّد (Plain Object)، ويُمثِّل أزواج من خاصيّة-قيمة المطلوب تعيينها.
يُسرِّع ويُسهِّل التّابع .css() من تعيين خاصيّات العناصر، كما هو الحال مع التّابع .prop(). يُمكِن للتّابع .css() أن يأخذ إمّا اسم الخاصيّة وقيمتها كمُعامِلات منفصلة، أو كائن مُفرد من أزواج خاصيّة-قيمة.
تستطيع jQuery أيضًا تفسير تنسيق DOM و CSS للخاصيّات التي يتألف اسمها من كلمات متعدّدة، فعلى سبيل المثال تفهم jQuery وتُعيد القيمة الصحيحة لـ .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) و .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }). لاحظ أنّه في DOM تكون علامات الاقتباس حول اسم الخاصيّة اختياريّة، أما في CSS فهي إجباريّة نظرًا لوجود الشَّرْطَة (hyphen) في اسم الخاصيّة.
عند تمرير عدد كقيمة، ستُحوِّله jQuery إلى سلسلة نصيّة وتُضيف px إلى نهاية هذه السّلسلة. وإن كانت الخاصيّة تحتاج إلى واحدات أخرى مختلفة عن px، فستُحوِّل القيمة إلى سلسلة نصيّة وتُضيف الواحدة المناسبة قبل استدعاء التّابع.