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

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

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

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

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

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

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

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

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

<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>
Selection_999(2222).png
Selection_999(2222).png (1.37 KiB) Viewed 1643 times

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

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

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

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

$(document).ready(function(){

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

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

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


<!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>
ผลลัพธ์ได้ได้
ezgif.com-video-to-gif (2).gif
ezgif.com-video-to-gif (2).gif (16.98 KiB) Viewed 1643 times

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

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

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