طريقة jQuery css()

طرق HTML/CSS لـ jQuery

يستطيع طريقة css() لـ jQuery الحصول أو تعيين خاصية النمط لعدة عناصر مختارة.

عند استخدام طريقة css()الحصولعند تعيين قيمة الخاصية، سيكونالعنصر المحدد الأولقيمة.

باستخدام طريقة css()تعيينعند تعيين قيمة الخاصية، سيكونجميع العناصر المحددةتعيين مجموعة واحدة أو أكثر من أزواج الخاصية/القيمة.

بالمثل، يمكن لـ jQuery تفسير تنسيق CSS والمستندات DOM متعددة الكلمات بنفس القدر. على سبيل المثال، يمكن لـ jQuery فهم css("background-color") وcss("backgroundColor") ويعود بالقيمة الصحيحة.

لكن، لا يدعم jQuery بشكل كامل اختصارات CSS المختصرة (مثل "background"، "margin" و "border")، وقد ينتج عن ذلك نتائج مختلفة في متصفحات مختلفة.

النحو:

الحصول على قيمة الخاصية CSS:

$.css(property)

تعيين خصائص CSS وقيمها:

$.css(property, value)

تعيين عدة خصائص CSS وقيمها:

$.css({property:value, property:value, ...})

استخدام الدالة لتعيين خصائص CSS وقيمها

$.css(selector, function(index, currentValue))

مثال

الحصول على لون الخلفية للـDIV عند النقر:

$("div").click(function(){
　　$(this).css("background-color");
});

تعيين خصائص color لجميع الفقرات:

$("button").click(function(){
　　$("p").css("color", "blue");
});

تعيين عدة خصائص CSS وقيمها:

$("button").click(function(){
　　$("p").css({
　　　　"color": "white",
　　　　"font-size": "1.3em",
　　　　"background-color": "#4285f4",
　　　　"padding": "20px"　　
　　});
});

الحصول على عرض الـDIV، الارتفاع، اللون ولون الخلفية:

$("div").click(function(){
　　let html = ["النص المضغوط يحتوي على النمط التالي:"];
　　let styleProps = $(this).css(["width", "height", "color", "background-color"]);
　　$.each(styleProps, function(prop, value) {
　　　　html.push(prop + ": " + value);
　　});
　　$("#result").html(html.join("<br>"));}}
});

استخدام دالة لضبط خصائص CSS وقيمها:

$("button").click(function(){
　　$("p").css("padding", function(i, val){
　　　　return i + 25;
　　});
});

عند ضغط الزر، زيادة حجم جميع الفقرات (استخدام دالة):

$("button").click(function(){
　　$("p").css({
　　　　padding: function(i, val){
　　　　　　return parseFloat(val) * 1.2;
　　　　}
　　});
});

قيمة الم 参数

طرق HTML/CSS لـ jQuery