آموزش جی کوئری – دستکاری خصوصیات CSS با jQuery

در بخش قبلی با دستکاری کلاس CSS با jQuery آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه دستکاری خصوصیات CSS با jQuery یا همان دریافت یا ست کردن خصوصیات استایل های CSS در جی کوئری می پردازیم.

متد css() جی کوئری

متد css() در جی کوئری برای دریافت محتوای محاسبه شده یک خصوصیت CSS یا ست کردن یک یا چند خصوصیت (property)ی CSS به المان های انتخابی استفاده می شود.

این متد یک راه سریع برای استایل دهی مستقیم به المان های HTML (استایل درون خطی) ارایه می دهد که به آسانی در یک استایل-شیت تعریف نشده است.

دریافت مقدار خصوصیت CSS

شما می توانید به آسانی با پاس دادن نام خصوصیت (property) به عنوان پارامتر متد css() , مقدار محاسبه شده را بدست آورید. سینتکس ساده آن بصورت زیر است :

$(selector).css("propertyName");

1	$(selector).css("propertyName");

مثال زیر مقدار محاسبه شده خصوصیت background-color از المان <div> را هنگام کلیک نمایش می دهد.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style type="text/css">
    div{
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
        display: inline-block;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("div").click(function(){
        var color = $(this).css("background-color");
        $("#result").html(color);
    });    
});
</script>
</head>
<body>
    <div style="background-color:orange;"></div>
    <div style="background-color:#ee82ee;"></div>
    <div style="background-color:rgb(139,205,50);"></div>
    <div style="background-color:#f00;"></div>
    <p>The computed background-color property value of this DIV element is: <b id="result"></b></p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery css() Demo</title>

div{

width: 100px;

height: 100px;

margin: 10px;

cursor: pointer;

display: inline-block;

}

</style>

$(document).ready(function(){

$("div").click(function(){

var color = $(this).css("background-color");

$("#result").html(color);

});

</script>

</head>

<body>

<p>The computed background-color property value of this DIV element is: <b id="result"></b></p>

</body>

</html>

ست کردن یک خصوصیت با مقدار آن

متد css() می تواند یک نام خصوصیت و مقدار آن را به عنوان پارامترهای جداگانه برای ست کردن یک خصوصیت CSS برای المان دریافت کند. سینتکس ساده آن بصورت زیر است :

$(selector).css("propertyName", "value");

1	$(selector).css("propertyName", "value");

مثال زیر خصوصیت background-color المان های <div> را هنگام کلیک به مقدار رنگی red تغییر ست می کند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style type="text/css">
    .box{
        width: 100px;
        height: 100px;
        margin: 10px;
        cursor: pointer;
        border: 1px solid #cdcdcd;
        display: inline-block;
    }        
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".box").click(function(){
        $(this).css("background-color", "red");
    });    
});
</script>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery css() Demo</title>

.box{

width: 100px;

height: 100px;

margin: 10px;

cursor: pointer;

border: 1px solid #cdcdcd;

display: inline-block;

}

</style>

$(document).ready(function(){

$(".box").click(function(){

$(this).css("background-color", "red");

});

</script>

</head>

<body>

</body>

</html>

ست کردن چندین خصوصیت با مقدار آن

همچنین می توانید چندین خصوصیت CSS را با متد css() ست کنید. سینتکس ساده آن بصورت زیر است :

$(selector).css({"propertyName":"value", "propertyName":"value", ...});

1	$(selector).css({"propertyName":"value", "propertyName":"value", ...});

مثال زیر background-color و padding را بصورت همزمان برای المان های انتخابی ست می کند.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery css() Demo</title>
<style type="text/css">
    p{
        font-size: 18px;
        font-family: Arial, sans-serif;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").css({"background-color": "yellow", "padding": "20px"});
    });    
});
</script>
</head>
<body>
    <h1>This is a heading</h1>
    <p style="background-color:orange;">This a paragraph.</p>
    <p style="background-color:#ee82ee;">This is another paragraph.</p>
    <p style="background-color:rgb(139,205,50);">This is none more paragraph.</p>
    <p>This is one last paragraph.</p>
    <button type="button">Add CSS Styles</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery css() Demo</title>

font-size: 18px;

font-family: Arial, sans-serif;

}

</style>

$(document).ready(function(){

$("button").click(function(){

$("p").css({"background-color": "yellow", "padding": "20px"});

});

</script>

</head>

<body>

<h1>This is a heading</h1>

<p style="background-color:orange;">This a paragraph.</p>

<p style="background-color:#ee82ee;">This is another paragraph.</p>

<p style="background-color:rgb(139,205,50);">This is none more paragraph.</p>

<p>This is one last paragraph.</p>

<button type="button">Add CSS Styles</button>

</body>

</html>

امیدوارم در این بخش آموزش جی کوئری, از دستکاری کلاس CSS با jQuery نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید

آموزش جی کوئری – دستکاری خصوصیات CSS با jQuery

متد css() جی کوئری

دریافت مقدار خصوصیت CSS

ست کردن یک خصوصیت با مقدار آن

ست کردن چندین خصوصیت با مقدار آن

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه