กำหนด style ด้วย jQuery
โพสต์แล้ว: 10/01/2019 7:11 pm
ในการกำหนด css เราสามารถกำหนดได้ทั้งสร้างไฟล์แยก,หรือ กำหนด style ในส่วน header ของ html หรือ จะในรูปแบบ Inline style คือกำหนดในเนื้อหาหรือใน element ของ html เลย
นอกจากเราสามารถใช้ method ของ jQuery เพื่อกำหนด style ได้ด้วย และสามารถกำหนดว่าจะให้มันทำงานเมื่อไหร่ก็ได้
เรามาดูตัวอย่างกัน
ในส่วน jQuery สามารถใช้ method css() เพื่อกำหนด style ที่ต้องการได้
ซึ้งเรากำหนดให้ paragraph ทั้งหมด มี background เป็นสีเหลือง
เพียงแค่เขียนโค้ดสั้นๆดังนี้
เมื่อมีการคลิกปุ่ม paragraph ทั้งหมดหรือทุกส่วนที่เป็น element "p" จะเปลี่ยน background เป็นสีหลือง ดังผลลัพธ์นี้
ไม่เพียงแค่สี method css() สามารถกำหนดทุกอย่างที่เป็น css เช่น font-size,magin,padding
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-สอนการใช้งาน jQuery & Ajax
-ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-บทเรียน jQuery
นอกจากเราสามารถใช้ method ของ jQuery เพื่อกำหนด style ได้ด้วย และสามารถกำหนดว่าจะให้มันทำงานเมื่อไหร่ก็ได้
เรามาดูตัวอย่างกัน
โค้ด: เลือกทั้งหมด
<h2>This is a heading</h2>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<button>Set background-color of p</button>
ซึ้งเรากำหนดให้ paragraph ทั้งหมด มี background เป็นสีเหลือง
เพียงแค่เขียนโค้ดสั้นๆดังนี้
โค้ด: เลือกทั้งหมด
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
});
});
</script>
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-สอนการใช้งาน jQuery & Ajax
-ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-บทเรียน jQuery