ورود به کارتابل مشتریان وب مهراز
متد ()css در jQuery
یادگیری jQueryاین متد یک یا چند ویژگی style را برای عناصر انتخاب شده تنظیم یا برمیگرداند.
برگرداندن خصوصیات css
برای برگرداندن مقدار خصوصیت یک css خاص ، از شکل دستوری زیر استفاده می کنیم:
css("propertyname");
مثال زیر مقدار background-color اولین عنصر منطبق را برمیگرداند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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>
</html>
تنظیم خصوصیات چندگانه css
برای تنظیم خصوصیات css چندگانه، از شکل دستوری زیر استفاده کنید:
css({"propertyname":"value","propertyname":"value",...});
مثال زیر background-color , a font-size تمام عناصر منطبق را تنظیم می کند:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.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>
</html>
نظر شما
>