วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก


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

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

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 3176
Joined: 19/09/2018 10:33 am

วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก

Post by Ittichai_chupol » 22/11/2019 5:41 pm

- ในการพัฒนาระบบเว็บ ให้มีความสวยงาม หรือมีรูปเล่นต่างๆ เพื่อให้ระบบเว็บหรือระบบ ที่พัฒนามีความน่าใช้งานมากขึ้น ก็คงหนีไม่พ้นการใช้งาน css เข้ามาช่วยในการทำงานของสิ่งเหล่านี้
- ซึ่งในปัจจุบันนี้ css ที่สวยๆ หรือ มีลูกเล่นเยอะ นั้นมีให้หาโหลดมาใช้งานได้มากมยตาม เว็บไซต์ ต่างๆมากมาย หรือถ้าหากใครมีึความรู้ความสามารถก็ที่สร้างขึ้นมาใช้เองได้เลย หรือไมก็นำ css ที่มีอยู่ก่อนมาปรับเปลี่ยนเฉพาะบางส่วนให้เข้ากับความต้องการของผู้พัฒนา โดยอาจจะเป็นการเปลี่ยนโดยเข้าไปปรับแก้ไขในตัวโคด Css โดยตรงเลย หรืออาจะเป็นการใช้ Javascript มาช่วยในการปรับเปลี่ยนก็ได้ ดังตัวอย่างต่อจากนี้ คือการใช้งาน jquery หรือ javascript เข้ามาช่วยในการเปลี่ยนค่า

1. ตัวอย่างโคด html ในส่วนการแสดงค่า โดยจะประกอบไปด้วย ส่วนของ html กับ ส่วน CSS

Code: Select all

<html>
<body>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>
<a href="#" id="test" class="button">Green</a>
</body>
</html>
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก Selection_999(2222).png
Selection_999(2222).png (1.37 KiB) Viewed 74 times

2.ในการที่จะใช้งาน jquery นั้นจะต้อง import ค่า โดยจะนำมาไว้ส่วนล่างสุดของ html

Code: Select all

<html>
*** โดค html จาก ข้อ 1 ***
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
3.จากนั้นทำการเขียนโคด jquery ในของเราเพิ่ม เพื่อจะทำการเปลี่ยนสีปุ่ม และตัวอักษร ในปุ่มจาก green เป็น blue

Code: Select all

$(document).ready(function(){

  $("#test").click(function(){ //ส่วนที่จะทำงานเมื่อมีการคลิกปุ่มที่มี id ชื่อว่า test
    $('.button').css("background-color", "BLUE"); //เปลี่ยนสีพื้นหลัง
    $('.button').text("BLUE"); //เปลี่ยนตัวอักษร
  });
});

** ทั้งนี้เราสามารถจะปรับค่า css อันอื่นได้ด้วยวิธีการเดียวกันนี้ด้วย
ร่วมโคดทั้งหมดจะได้ดังนี้

Code: Select all


<!DOCTYPE html>
<html>
<body>
<style>
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
</style>

<a href="#" id="test" class="button">Green</a>

</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){

  $("#test").click(function(){
    $('.button').css("background-color", "BLUE");
    $('.button').text("BLUE");
     $('.button').html(img_show);
  });
});

</script>
ผลลัพธ์ได้ได้
วิธีการการใช้งาน jquery เพื่อปรับเปลี่ยนค่า css ให้กับปุ่มเมื่อมีการคลิก ezgif.com-video-to-gif (2).gif
ezgif.com-video-to-gif (2).gif (16.98 KiB) Viewed 74 times

บทความที่เกี่ยวข้อง
วิธีการเพิ่ม css ให้กับ class โดยใช้ js
การใช้ .attr() jquery เพื่อดึงค่าจาก attribute ของ element หรือกำหนดค่าให้กับ attribute
วิธีการนำค่าจาก attribute ที่อยู่ใน element หนึ่ง ไปใส่ให้กับ attribute ที่อยู่ในอีก element หนึ่ง

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 2 guests