آموزش متد ()css در jQuery

بهاره حسنیبهاره حسنی
102 بازدید
jquery
[cdb_box_content]

با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح

با یکی دیگر از مقالات آموزش جی کوئری در خدمت شما عزیزان هستیم.

می توانید برای مطالعه بیشتر در مورد جی کوئری به این لینک در وب سایت پرینان طرح مراجعه کنید.

در آموزش امروز قصد داریم در مورد متد ()css در کتابخانه جی کوئری صحبت کنیم.

در ادامه آموزش همراه ما باشید.

[/cdb_box_content]
[cdb_box_content]

مقدمه


متد ()css یک یا چند ویژگی استایل را برای عناصر انتخابی تنظیم میکند یا برمیگرداند.

در ادامه با نحوه بر گرداندن یا تنظیم کردن یک یا چند ویژگی css آشنا میشوید.

در ادامه همراه ما باشید.

[/cdb_box_content]
[cdb_box_content]

برگرداندن یک ویژگی css :

برای برگرداندن مقدار یک ویژگی css مشخص شده ، به شیوه ی زیر عمل کنید:

css(“propertyname“);

مثال زیر مقدار رنگ پس زمینه ی عنصر همسان را برمی گرداند.

مثال »

[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
alert(“Background color = ” + $(“p”).css(“background-color”));
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style=”background-color:#ff0000″>This is a paragraph.</p>
<p style=”background-color:#00ff00″>This is a paragraph.</p>
<p style=”background-color:#0000ff”>This is a paragraph.</p>

<button>Return background-color of p</button>

</body>

[/php]

خروجی مثال را در این لینک ببینید.

[/cdb_box_content]
[cdb_box_content]

تنظیم کردن یک ویژگی css :

برای تنظیم یک ویژگی خاص css به این طریق عمل کنید.

css(“propertyname“,”value“);
مثال زیر رنگ همه ی عناصر پس زمینه را برای همه ی عناصر همسان تنظیم میکند.
مثال»
[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).css(“background-color”, “yellow”);
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style=”background-color:#ff0000″>This is a paragraph.</p>
<p style=”background-color:#00ff00″>This is a paragraph.</p>
<p style=”background-color:#0000ff”>This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set background-color of p</button>

</body>

[/php]
خروجی مثال را در این لینک ببینید.
[/cdb_box_content]
[cdb_box_content]

تنظیم کردن چند ویژگی css :

برای تنظیم چندین ویژگی css از دستور زیر استفاده کنید :

css({“propertyname“:”value“,”propertyname“:”value“,…});
مثال زیر یک رنگ پس زمینه و اندازه ی فونت یکسان را برای همه ی المان های همسان تنظیم میکند.
مثال »
[php]

<head>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).css({“background-color”: “yellow”, “font-size”: “200%”});
});
});
</script>
</head>
<body>

<h2>This is a heading</h2>

<p style=”background-color:#ff0000″>This is a paragraph.</p>
<p style=”background-color:#00ff00″>This is a paragraph.</p>
<p style=”background-color:#0000ff”>This is a paragraph.</p>

<p>This is a paragraph.</p>

<button>Set multiple styles for p</button>

</body>

[/php]
خروجی این مثال را در این لینک ببینید.
[/cdb_box_content]
دسته بندی JQuery
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

38+ محصولات
294+ سفارشات تکمیل شده
1720+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت