.css() เป็นการใช้ css ในการเพิ่ม คุณสมบัติ attribute ของ css หรือ Style Sheet ใน element ต่าง ๆ ที่กำหนดและอ้างถึงใน Selectors
Syntax
.css( propertyName )
.css( propertyName, value )
.css( propertyName )
.css( propertyName,value )
.css( propertyName,function(index, value) )
.css( map )
Example 1 ตัวอย่างการใช้งาน .css()
Csscss1.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
div { width:60px; height:60px; margin:5px; float:left; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function () {
var color = $(this).css("background-color");
$("#result").html("That div is <span style='color:" +
color + ";'>" + color + "</span>.");
});
});
</script>
</head>
<body>
<span id="result"> </span>
<div style="background-color:blue;"></div>
<div style="background-color:rgb(15,99,30);"></div>
<div style="background-color:#123456;"></div>
<div style="background-color:#f11;"></div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ .css("background-color"); คืออ้างถึง <div> และกำหนดคุณสมบัติให้กับ #result
Example 2 ตัวอย่างการใช้งาน .css()
Csscss2.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
p { color:blue; width:200px; font-size:14px; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","red");
});
});
</script>
</head>
<body>
<p>Just roll the mouse over me.</p>
<p>Or me to see a color change.</p>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ $(this).css("color","red"); กำหนดสีต่าง ๆ
Example 3 ตัวอย่างการใช้งาน .css()
Csscss3.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
#box { background: black; color: snow; width:100px; padding:10px; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#box").one( "click", function () {
$( this ).css( "width","+=200" );
});
});
</script>
</head>
<body>
<div id="box">Click me to grow</div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ .$( this ).css( "width","+=200" ); กำหนดความกว้าง
Example 4 ตัวอย่างการใช้งาน .css()
Csscss4.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
p { color:blue; font-weight:bold; cursor:pointer; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var words = $("p:first").text().split(" ");
var text = words.join("</span> <span>");
$("p:first").html("<span>" + text + "</span>");
$("span").click(function () {
$(this).css("background-color","yellow");
});
});
</script>
</head>
<body>
<p>
Once upon a time there was a man
who lived in a pizza parlor. This
man just loved pizza and ate it all
the time. He went on to be the
happiest man in the world. The end.
</p>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ .css("background-color","yellow"); กำหนดค่า Background
Example 5 ตัวอย่างการใช้งาน .css()
Csscss5.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
p { color:green; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").hover(function () {
$(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
}, function () {
var cssObj = {
'background-color' : '#ddd',
'font-weight' : '',
'color' : 'rgb(0,40,244)'
}
$(this).css(cssObj);
});
});
</script>
</head>
<body>
<p>Move the mouse over a paragraph.</p>
<p>Like this one or the one above.</p>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ $(this).css(cssObj); การสร้างและกำหนดค่าในรูปแบบของ Object
Example 6 ตัวอย่างการใช้งาน .css()
Csscss6.html
<html>
<head>
<title>ThaiCreate.Com jQuery Tutorials</title>
<style>
div { width: 20px; height: 15px; background-color: #f33; }
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").click(function() {
$(this).css({
width: function(index, value) {
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
}
});
});
});
</script>
</head>
<body>
<div>click</div>
<div>click</div>
</body>
</html>
Screenshot
คำอธิบาย (ภาษาไทย)
จากตัวอย่างมีการใช้ css กำหนดค่าความกว้างและความสูง
ลิ้งค์ที่ควรศึกษา
Go to : jQuery Selectors : jQuery Selectors and Element
Go to : jQuery Css : jQuery and Css
เกี่ยวกับบทความ
ส่วนหนึ่งของบทความได้เรียบเรียงและแปลจากเว็บไซต์ jQuery.Com โค้ดตัวอย่างคำสั่งนี้อยู่ภายใต้สัญญาอนุญาตของ GFDL สามารถนำโค้ดและคำสั่งใช้งานได้ฟรี สงวนลิขสิทธิ์เฉพาะคำอธิบายภาษาไทย
|
 ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
| |
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
| |
Score Rating : |
 |
|
| |
Create/Update Date : |
2011-09-22 21:21:58 /
2017-03-19 13:54:23 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
|
|
Load balance : Server 05
