การใช้งาน !important เพื่อให้ค่า css นั้นมีสำคัญสูงสุด

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

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

ภาพประจำตัวสมาชิก
ewqolf
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 621
ลงทะเบียนเมื่อ: 14/11/2022 9:26 am

การใช้งาน !important เพื่อให้ค่า css นั้นมีสำคัญสูงสุด

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

การใช้งาน !important เพื่อให้ค่า css นั้นมีสำคัญสูงสุดคุณอาจจะมีปัยษหในการกำหนดค่า css ด้วย class คุณอาจจะสงสัยว่าทำไม css ที่เรากำหนดไว้ไม่เข้าหรือว่าชื่อ class นั้นผิดนะ แล้วคุณก็ตรวจแล้วได้รู้ว่า class นั้นก็ตรง ถ้าคุณเป็นแบบนั้นคุณประสบปัญหาเดียวกับผมแน่นอน จริงๆแล้ว css นั้นถูกนำมาใส่แล้วครับแต่ว่ามันไม่ได้แสดงออกมาเพราะลำดับความสำคัญนั้นเอง โดยปกติถ้าหากว่าเรามีตัว style ที่เป็นตัวดั่งเดิม อยู่แล้วนั้นถ้าหากว่าเราจะใส่ทับลงไปมันก็จะไม่เกิดอะไรขึ้นไปครับ ซึ่งเราสามารถใช้งานตัวของ !important ต่อท้ายโค้ด css ที่เราอยากจะให้ความสำคัญในการทำงานครับ

การใช้งานตัว !important ที่เรานั้นจะทำนั้นต้องเป็นการกำหนดค่า css โดยการ call class css เท่านั้นครับเพราะว่าการปรับ css ด้วย โค้ดเพื่อเปลี่ยน css โดยตรงแล้วยังไงก็ไม่มีปัญหาเรื่องนี้ครับจึงไม่มีความจำเป็นใดที่เราจะใช้ตัว !important เลยครับ เรามาต่อกันที่ทำมึงเราถึงจำเป็นจะต้องใช้ important นั้นเพราะว่าเรานั้นต้องการเอา css ที่เรานั้นได้กำหนดไว้แล้วมาใส่ในตัว element และเราอยากจะให้ตัว element ของเรานั้นใช้ตัว class อีกตัวนึงเพื่อ reset อะไรบางอย่างขึ้นมาแต่ว่าปรากฏว่าเอามาใส่แล้วใช้ไม่ได้ เราถึงต้องใช้ important เพื่อแสดงถึงความสำคัญให้ใช้ตัว important ก่อนเสมอครับซึ่งวิธีการใช้งานตัว important นั้นก็มีดังนี้ครับ

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

.helloworld{
	left: 50% !important;
	background-color: #4ab858 !important; 
}
ซึ่ง important นั้นจะทำให้โค้ดด้านหน้าในบรรทัดเดียวกันนั้นมีลำดับความสำคัญสูงที่สุดเพราะงั้นยิ่งเรากำหนดเยอะเราก็ต้องกดหน่อย important เยอะครับ จากนั้นผมจะทำการสร้าง element ขึ้นมา 1 ตัวครับโดยกำหนด element นั้นเอาไว้ดังนี้ครับ

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

<div name="01" id="01" class="hello" style="top: 25%; left: 20%; position: absolute; background-color: #1b95e0; width: 200px; height: 200px;"></div>
ครับผมจากนั้นผมจะทำการสร้างปุ่มขึ้นมา 1 ปุ่มเพื่อให้เมื่อผมทำการกดปุ่มแล้วจะทำการใส่ class เพิ่มเข้าไปใน element ที่เราสร้างขึ้นมาครับ

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

<input type="button" id="name" value="เปลี่ยนชื่อ">
<script>
	$("#name").click(function() {
	$("#01").addClass("helloworld")
})
</script>
ซึ่งจากโค้ดเมื่อเราทำการกดที่ปุ่มจะทำการ add class helloworld เข้าไปใน element ที่เราสร้างขึ้นมาครับโดยผมนั้นจะเปรียบเทียบ การเปลี่ยนแปลงทั้ง 2 แบบแบบที่ใส่ Important กับแบบที่ไม่ใส่ important โดยผมจะขอเริ่มต้นจาก แบบที่ไม่ใส่ Important ก่อนนะครับ

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

.helloworld{
	left: 50% ;
	background-color: #4ab858 ; 
}
ผลลัพธ์ของการไม่ใช้ important
ผลลัพธ์ของการไม่ใช้ important
ผลลัพธ์ของการไม่ใช้ important.gif (75.5 KiB) Viewed 1945 times
ซึ่งก็จะเห็นได้ว่าตัว element เมื่อผมทำการกดปุ่มแล้วแต่ว่าไม่มีการเปลี่ยนแปลงใดๆเกิดขึ้นเลยครับผมทั้งๆที่ class นั้นก็เปลี่ยนไปตาม css แล้ว และอีกแบบนึงก็คือแบบที่ใส่ important

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

.helloworld{
	left: 50% !important;
	background-color: #4ab858 !important; 
}
ผลลัพธ์ของการใช้ important
ผลลัพธ์ของการใช้ important
ผลลัพธ์ของการใช้ important.gif (73.85 KiB) Viewed 1945 times
ซึ่งตาม gif นี้ผมได้กดปุ่มแล้วสีของสี่เหลี่ยมจะเปลี่ยนสีและเปลี่ยนสถานที่ซึ่งผมนั้นเปลี่ยนแปลงแค่โค้ดส่วนของ css เท่านั้นไม่ได้มีการเปลี่ยนแปลงโค้ดส่วนของ javascript เลย

การที่นั้นจะใส่ important นั้นไม่ได้เป็นการเปลี่ยนแปลงตัว style เข้าไปนะครับถ้าสังเกตุดูดีๆถ้าหากว่าคุณได้ลองทำดูตัว style ต่างๆนั้นจะยังเป็นแบบที่เราต้องไว้อยู่ครับ ถ้าหากว่าเรานั้นอยากจะเปลี่ยนตัว style จริงๆให้เราใช้ javacscript ในการเปลี่ยน style หรือปัญหาอีกอย่างก็คือเราสามารถแก้ไขให้ตัว element ของเราไม่ต้องกำหนด class และเรียกผ่าน css style ครับถ้าหากว่าเราใช้วิธีนั้นเราก็ไม่จำเป็นจะต้องใช้ important ก็ได้ครับ ซึ่งข้อเสียของการกดหนด style ติดไว้ที่ element นั้นเราจะต้องใช้ javascript ในการเปลี่ยน style ถ้าหากว่าเพิ่ม class Important เข้าไปก็ใช้ได้แต่ถ้าหากว่าเราทำการลบ class นั้นทิ้งไปมันก็จะย้อนกลับไปใช้ในแบบที่เรากำหนดไว้ที่ element ครับ

อ้างอิง
https://www.w3schools.com/css/css_important.asp
https://rabbitinblack.com/2011/10/css-style-id-class/
https://developer.mozilla.org/en-US/docs/Web/CSS/important
คนจะตายเมื่อถูกฆ่า...ขอบคุณครับ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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