การสร้าง
element ขึ้นมาเพื่อแสดงที่หน้าเว็บนั้นเป็นเรื่องปกติที่เรานั้จะอยากทำให้ตัว element นั้นมีความสวยงามดูสะอาดตาและมีการปรับแก้ไข element ได้ตามต้องการเพียงแต่ว่าเรานั้นจะต้องใช้งาน
css เข้ามาเพื่อช่วยให้ element ของเรานั้นมีความสวยงามมากขึ้นซึ่งโดยในกระทู้แล้วๆของผมได้พูดถึงการใช้งาน css กันไปแล้วเพียงแต่ว่าบางครั้งที่เราจะกำหนดค่า css ในหลายๆครั้งแบบที่ใช้ css ตัวเดียวกันล่ะเราจะต้องมีการกำหนด css ใหม่ทุกรอบเลยหรอ ซึ่งผมจะบอกว่าไม่ครับและนั้นก็เป็นสิ่งที่ไม่ควรเนื่องจากว่าการที่เรานั้นกำหนดให้ element นั้นมีค่า css นั้นไปเลยนั้นจะทำให้ element ตัวนั้นไม่สามารถเปลี่ยนแปลง css ได้ นอกจากเราจะใช้ javascript ในการแก้ไขเลย ถ้าหากว่าข้อมูลของเรานั้นอาจจะเยอะมากการเขียนซ้ำๆทุกอันนั้นจะได้ให้โค้ดของนั้นยาวและไฟร์ใหญ่มากขึ้น ในกระทู้นี้ผมจะนำเสอนวิธีการสร้าง element ที่เรียกไฟร์ css จากการลบและเพิ่ม
class เท่านั้นครับ
ครับผมโดยเริ่มต้นนั้นเราจะต้องสร้าง element ต่างๆขึ้นมาก่อน 1 อันครับ ที่สำคัญนั้นคือเรานั้นจะมีทำการกำหนดตัว css ไปที่ตัวของ element เลยครับ เดี้ยวผมจะบอกให้ในภายหลังครับ
โค้ด: เลือกทั้งหมด
<div name="01" id="01" class"helloworld"></div>
โดย element ที่ผมนั้นสร้างมานั้นเป็น div และมีการกำหนดเพียงแค่ name id class เท่านั้นครับ สาระสำคัญของเราอยู่ที่การเรียก class จากนั้นเราจะมาที่ส่วนของหัว header หรือว่าที่ ไฟร์ style sheet ของเราก็ได้ครับมีผลลัพธ์ที่เหมือนกันครับ ซึ่งผมจะกำหนดให้ css นั้นเป็น
โค้ด: เลือกทั้งหมด
.helloworld{
width: 200px;
height: 200px;
background-color: #4ab858;}
.Hi{
background-color: #4c59ce;
}
ซึ่งในตอนนี้ก็จะยังไม่เกิดอะไรขึ้นครับเพราะว่าเรานั้นยังไม่ได้ add class เข้าไปที่ตัว element ครับโดยผมจะสร้างปุ่มขึ้นมา 2 ปุ่มครับ โดยปุ่มนึงนั้นจะเป็นปุ่มที่ใช้สำหรับการ add class ส่วนอีกปุ่มก็จะเป็นปุ่มที่ใช้สำหรับ remove class
โค้ด: เลือกทั้งหมด
<input type="button" id="add" value="add">
<input type="button" id="remove" value="remove">
โค้ด: เลือกทั้งหมด
$("#add").click(function() {
$("#01").addClass("Hi");
})
$("#remove").click(function() {
$("#01").removeClass("Hi");
})
ซึ่ง ทั้ง 2 ปุ่มนี้จะมีหน้าที่สำหรับการใส่ class และเอา class ออกครับซึ่งการใช้งานนั้นก็ไม่ยากครับนั้นก็คือเมื่อเรานั้นทำการกดที่ปุ่ม add ก็จะทำการใส่ class เข้าไปที่ element และถ้า remove ก็ลงเอา class Hi ออกจาก element ครับ
- การเพิ่ม class และการลบ classเพื่อเปลี่ยน css
- การเพิ่ม class และการลบ classเพื่อเปลี่ยน css.gif (52.37 KiB) Viewed 158 times
ซึ่งอย่างที่ผมบอกไปข้างต้นนั้นถ้าหากว่าเราทำการกำหนด class css ไว้ที่ตัวของ element ไว้ตัว css นั้นจะมีลำดับความสำคัญที่เรียกว่าสูงกว่าการที่เราเรียก class พอเราทำการเอา class มาใส่ตัว css นั้นจะไม่เปลี่ยนแปลงเพราะว่าเรานั้นกำหนด css ไว้ที่ elemant ซึ่งจะทำให้เราใช้วิธีการนี้ไม่ได้ครับและถ้าหากอยากจะเปลี่ยน css เราต้องใช้
javascript ในการเขียนคำสั่ง css ใส่มันใหม่ครับทำให้โค้ดนั้นยาวกว่าปกติ การใช้วิธีที่ผมสอนไปในข้างต้นนั้นจะช่วยประหยัดโค้ดได้มากขึ้นทั้งฝั่งของ javascript และ
html โค้ดก็จะไม่รกเกินไปอ่านง่ายด้วยครับ
อ้างอิง
https://www.w3schools.com/cssref/sel_class.php
https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
https://www.babelcoder.com/blog/articles/from-global-css-to-bem-and-local-css
