.css() - Manipulation , jQuery |
.css() เป็นการใช้ jQuery Manipulation กับ .css() ใช้ในการจัดการและควบคุมเอกสาร element ของ css ในรูปแบบต่าง ๆ เช่น การกำหนด css ให้กับ element หรือ การอ่านค่าของ css ใน element ที่อ้างถึง การกำหนด css
สามารถอ่าน jQuery Css Basic ได้ที่นี่ Go to : jQuery Css : jQuery and Css
Syntax
css( propertyName )
css( propertyName, value )
.css( propertyName,value )
.css( propertyName,function(index, value) )
.css( map )
Example 1 ตัวอย่างการใช้งาน jQuery .css()
Manipulationcss1.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
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Manipulation กับ .css() ในการจัดการกับ element ที่อ้างถึง
Example 2 ตัวอย่างการใช้งาน jQuery .css()
Manipulationcss2.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
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Manipulation กับ .css() ในการจัดการกับ element ที่อ้างถึง
Example 3 ตัวอย่างการใช้งาน jQuery .css()
Manipulationcss3.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
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Manipulation กับ .css() ในการจัดการกับ element ที่อ้างถึง
Example 4 ตัวอย่างการใช้งาน jQuery .css()
Manipulationcss4.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
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Manipulation กับ .css() ในการจัดการกับ element ที่อ้างถึง
Example 5 ตัวอย่างการใช้งาน jQuery .css()
Manipulationcss5.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
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Manipulation กับ .css() ในการจัดการกับ element ที่อ้างถึง
Example 6 ตัวอย่างการใช้งาน jQuery .css()
Manipulationcss6.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
คำอธิบาย (ภาษาไทย)
จากตัวอย่างเป็นการใช้ jQuery Manipulation กับ .css() ในการจัดการกับ element ที่อ้างถึง
ลิ้งค์ที่ควรศึกษา
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:11:34 /
2017-03-19 13:49:05 |
| |
Download : |
No files |
|
|
Sponsored Links / Related |
|
|
|
|
|
|
Load balance : Server 04
