กำหนด style ด้วย jQuery

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

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

กำหนด style ด้วย jQuery

โพสต์โดย abdkode » 10/01/2019 7:11 pm

ในการกำหนด 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) เปิดดู 1073 ครั้ง


ในส่วน 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) เปิดดู 1073 ครั้ง


ไม่เพียงแค่สี method css() สามารถกำหนดทุกอย่างที่เป็น css เช่น font-size,magin,padding


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

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน