การเพิ่มสไตล์หลายอย่างให้อิลีเมนต์ด้วย vanilla JavaScript แบบดิบ อาจรู้สึก clunky (ไม่เป็นระบบ) วิธีทั่วไปที่สุดที่ผมเห็นในการ styling อิลีเมนต์ด้วย plain 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"มันทำงาน แต่ redundant (ซ้ำซ้อน) มีการทำซ้ำมากเกินไป และคุณไม่สามารถ reuse โค้ดได้ มันคล้ายกับการใช้ anonymous function แทน named function
แทนที่จะทำข้างบน คุณสามารถใช้ style object:
// 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)ไม่เพียงแค่วิธีนี้สะอาดกว่า แต่คุณยังสามารถนำ style object buttonPrimary ไปใช้กับปุ่มไหนก็ตามที่ต้องการ primary button styles และหลีกเลี่ยงโค้ดซ้ำ
ตัวอย่างโค้ดการนำ style object ไปใช้กับหลายอิลีเมนต์
รอ ไทำไมต้องใช้ JavaScript styling HTML elements แทน CSS?
ขอโทษ ผมไม่รับบนต์ CSS in JS หรือ JSS เป็นหัวข้อร้อนในชุมชน CSS & JS แต่ผมไม่มี dog in this fight (ไม่บ้านเอาตัวเอง) ผมชอบทั้งสองแนวทาง ผมแนะนำให้ใช้ context เป็น driver หลังการตัดสินใจของคุณ
แต่ผมจะทำ case ให้สถานการณ์ที่ styling ด้วย JavaScript มีประโยชน์ สมมติคุณอยู่ในสถานการณ์ที่คุณไม่มี direct access ไปยัง CSS stylesheet ที่กำหนด styling ของอิลีเมนต์ ในสถานการณ์นี้ การสามารถ style/overwrite สไตล์ที่มีอยู่ด้วย JavaScript อาจเป็นความแตกต่างระหว่างแก้ปัญหาลูกค้าเร็ว หรืออาจไม่แก้ได้วันนั้น
ในสถานการณ์แบบนี้ ความยืดหยุ่นของ JavaScript ส่องสว่างออกมา
