- ซึ่งในปัจจุบันนี้ 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>
2.ในการที่จะใช้งาน jquery นั้นจะต้อง import ค่า โดยจะนำมาไว้ส่วนล่างสุดของ html
โค้ด: เลือกทั้งหมด
<html>
*** โดค html จาก ข้อ 1 ***
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
โค้ด: เลือกทั้งหมด
$(document).ready(function(){
$("#test").click(function(){ //ส่วนที่จะทำงานเมื่อมีการคลิกปุ่มที่มี id ชื่อว่า test
$('.button').css("background-color", "BLUE"); //เปลี่ยนสีพื้นหลัง
$('.button').text("BLUE"); //เปลี่ยนตัวอักษร
});
});
ร่วมโคดทั้งหมดจะได้ดังนี้
โค้ด: เลือกทั้งหมด
<!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>
บทความที่เกี่ยวข้อง
วิธีการเพิ่ม css ให้กับ class โดยใช้ js
การใช้ .attr() jquery เพื่อดึงค่าจาก attribute ของ element หรือกำหนดค่าให้กับ attribute
วิธีการนำค่าจาก attribute ที่อยู่ใน element หนึ่ง ไปใส่ให้กับ attribute ที่อยู่ในอีก element หนึ่ง