การเพิ่มสไตล์ที่หลากหลายให้กับองค์ประกอบด้วย JavaScript วานิลลาดิบอาจทำให้รู้สึกอึดอัดเล็กน้อย วิธีทั่วไปที่สุดที่ฉันเคยเห็นในการจัดรูปแบบองค์ประกอบด้วย JavaScript ธรรมดาคือการคว้าองค์ประกอบเป้าหมายของคุณ แล้วเพิ่มสไตล์ทีละรายการ:
// Grab target element (here via its class attribute)
const buttonAddToCart = document.querySelector(".button-add-to-cart")
// Add style properties, one at a time
buttonAddToCart.style.backgroundColor = "#82b97e"
buttonAddToCart.style.color = "#fff"
buttonAddToCart.style.padding = "24px"
buttonAddToCart.style.textTransform = "uppercase"
buttonAddToCart.style.letterSpacing = "0.1em"ใช้งานได้ แต่ซ้ำซ้อน มีการซ้ำมากเกินไป และคุณไม่สามารถนำรหัสของคุณมาใช้ซ้ำได้ มันเหมือนกับการใช้ฟังก์ชันที่ไม่ระบุชื่อแทนฟังก์ชันที่มีชื่อ
แทนที่จะทำด้านบน คุณสามารถใช้วัตถุสไตล์:
// Create a style object
const buttonPrimary = {
backgroundColor: "#82b97e",
color: "#fff",
padding: "24px",
textTransform: "uppercase",
letterSpacing: "0.1em",
}
// Assign buttonPrimary (style object) to button element
Object.assign(buttonAddToCart.style, buttonPrimary)
วิธีนี้ไม่เพียงสะอาดกว่าเท่านั้น แต่คุณยังสามารถใช้ buttonPrimary . นี้ได้ style ให้กับองค์ประกอบปุ่มใดๆ ก็ตามที่ต้องการสไตล์ปุ่มหลัก และหลีกเลี่ยงการเขียนโค้ดซ้ำๆ
ตัวอย่างโค้ดของการนำสไตล์ออบเจ็กต์ไปใช้กับหลายองค์ประกอบ
เดี๋ยวก่อน ทำไมคุณถึงใช้ JavaScript เพื่อจัดรูปแบบ HTML องค์ประกอบแทน CSS?
ขออภัย ฉันไม่ได้สนใจ CSS ใน JS หรือ JSS เป็นหัวข้อที่ร้อนแรงในฉาก CSS &JS แต่ฉันไม่มีสุนัขในการต่อสู้ครั้งนี้ ฉันชอบทั้งสองวิธี ฉันแนะนำให้คุณใช้ บริบท ในฐานะผู้ขับเคลื่อนเบื้องหลังการตัดสินใจของคุณ
แต่ฉันจะทำกรณีที่เมื่อการจัดสไตล์ด้วย JavaScript มีประโยชน์ สมมติว่าคุณอยู่ในสถานการณ์ที่คุณไม่มีสิทธิ์เข้าถึงโดยตรงไปยังสไตล์ชีต CSS ที่กำหนดสไตล์บนองค์ประกอบ ในสถานการณ์นี้ ความสามารถในการจัดรูปแบบ/เขียนทับสไตล์ที่มีอยู่ด้วย JavaScript อาจเป็นความแตกต่างระหว่างการแก้ปัญหาของลูกค้าอย่างรวดเร็วหรืออาจแก้ไม่ได้ในวันนั้น
ในสถานการณ์แบบนี้ ความเก่งกาจของ JavaScript ส่องผ่าน
