กำหนด style ด้วย jQuery

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

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

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

กำหนด style ด้วย jQuery

Postby abdkode » 10/01/2019 7:11 pm

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

นอกจากเราสามารถใช้ method ของ jQuery เพื่อกำหนด style ได้ด้วย และสามารถกำหนดว่าจะให้มันทำงานเมื่อไหร่ก็ได้
เรามาดูตัวอย่างกัน

Code: Select all

<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 1430 times


ในส่วน jQuery สามารถใช้ method css() เพื่อกำหนด style ที่ต้องการได้
ซึ้งเรากำหนดให้ paragraph ทั้งหมด มี background เป็นสีเหลือง
เพียงแค่เขียนโค้ดสั้นๆดังนี้

Code: Select all

<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 1430 times


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


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

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: Bing [Bot], jamepiyawat and 16 guests