กำหนด style ด้วย jQuery

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

กำหนด style ด้วย jQuery

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

ในการกำหนด css เราสามารถกำหนดได้ทั้งสร้างไฟล์แยก,หรือ กำหนด style ในส่วน header ของ html หรือ จะในรูปแบบ Inline style คือกำหนดในเนื้อหาหรือใน element ของ html เลย

นอกจากเราสามารถใช้ 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>
css()-1.jpg
css()-1.jpg (18.04 KiB) Viewed 2106 times
ในส่วน jQuery สามารถใช้ method css() เพื่อกำหนด style ที่ต้องการได้
ซึ้งเรากำหนดให้ paragraph ทั้งหมด มี background เป็นสีเหลือง
เพียงแค่เขียนโค้ดสั้นๆดังนี้

โค้ด: เลือกทั้งหมด

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color", "yellow");
  });
});
</script>
เมื่อมีการคลิกปุ่ม paragraph ทั้งหมดหรือทุกส่วนที่เป็น element "p" จะเปลี่ยน background เป็นสีหลือง ดังผลลัพธ์นี้
css()-2.jpg
css()-2.jpg (24.9 KiB) Viewed 2106 times
ไม่เพียงแค่สี method css() สามารถกำหนดทุกอย่างที่เป็น css เช่น font-size,magin,padding


ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : Jquery & Javascript
-สอนการใช้งาน jQuery & Ajax
-ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
-บทเรียน jQuery
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 70