پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
با سلام خدمت همراهان همیشگی وب سایت پرنیان طرح
با یکی دیگر از مقالات آموزش جی کوئری در خدمت شما عزیزان هستیم.
می توانید برای مطالعه بیشتر در مورد جی کوئری به این لینک در وب سایت پرینان طرح مراجعه کنید.
در آموزش امروز قصد داریم در مورد متد ()css در کتابخانه جی کوئری صحبت کنیم.
در ادامه آموزش همراه ما باشید.
مقدمه
متد ()css یک یا چند ویژگی استایل را برای عناصر انتخابی تنظیم میکند یا برمیگرداند.
در ادامه با نحوه بر گرداندن یا تنظیم کردن یک یا چند ویژگی css آشنا میشوید.
در ادامه همراه ما باشید.
برگرداندن یک ویژگی 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]
خروجی مثال را در این لینک ببینید.
تنظیم کردن یک ویژگی 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]
خروجی مثال را در این لینک ببینید.
تنظیم کردن چند ویژگی 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]
خروجی این مثال را در این لینک ببینید.
