تغییر css با jquery

هدایت عباسی آموزش جی کوئری

آموزش ویدئویی تغییر css با جی کوئری

دانلود فیلم و آموزش ویدئویی تغییر css با jquery. در این فیلم با این دستورات آشنا می شوید و نحوه کار با آنها را فرا می گیرید.

چنانچه مشکلی در اجرای فیلم دارید از مرورگر فایرفاکس استفاده نمایید یا روی لینک زیر کلیک نمایید.

مشاهده یا دانلود فیلم بالا

در این بخش از آموزش جی کوئری (Jquery tutorial) از تاپ سایت 98 قصد داریم به آموزش تغییر css با جی کوئری و با ذکر مثال بپردازیم.

توجه : کدها همه تست شده می باشد و کاملا صحیح است. چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

خطا

چون از cdn استفاده شده باید به اینترنت متصل باشید. در غیر این صورت کد اجرا نخواهد شد.

در صورتی که کد بالا اجرا نمی شود می توانید بجای cdn از فایل جی کوئری استفاده نمایید.

بایستی فایل جی کوئری را دانلود کرده باشید.

آموزش دانلود جی کوئری

برگرداندن ویژگی css با جی کوئری

برای برگرداندن ویژگی css با جی کوئری می توانیم مانند مثال زیر عمل نماییم.

با دستور alert می توانیم ویژگی پس زمینه را نمایش دهیم. مثال زیر مقدار پس زمینه را برمی گرداند.

بر روی دکمه کلیک نمایید تا نتیجه را ببینید.

مثال

<!DOCTYPE html>
<html>
<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 = " + $("h1").css("background-color"));
});
});
</script>
</head>
<body>
<h1 style="background-color:blue">topsite98.com</h1>
<button>Return css</button>

</body>
</html>

تغییر css با جی کوئری

ما می توانیم با استفاده از جی کوئری ، سی اس اس (css) را تغییر دهیم.

برای تغییر css با جی کوئری ، ابتدا عنصر را مشخص کرده و سپس از css استفاده می کنیم و سپس استایل های مورد نظر را می نویسیم.

می توانیم یک یا چند ویژگی css را با جی کوئری تغییر دهیم.

با کلیک روی دکمه رنگ متن h1 تغییر می کند.

مثال

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1").css("color", "red");
});
});
</script>
</head>
<body>
<h1>topsite98.com</h1>
<button>set css</button>

</body>
</html>