แก้ไขแล้ว: วิธีเปลี่ยนตัวแปร css ด้วย javascript

ไม่มีคำตอบเดียวสำหรับคำถามนี้เนื่องจากทั้งสองภาษาเข้าใกล้การกำหนดตัวแปรและการจัดการในรูปแบบที่แตกต่างกัน อย่างไรก็ตาม โดยทั่วไปแล้ว ปัญหาหนึ่งของการพยายามเปลี่ยนตัวแปร CSS ด้วย JavaScript คือทั้งสองภาษาใช้ไวยากรณ์ที่แตกต่างกันสำหรับการประกาศและเข้าถึงตัวแปร นอกจากนี้ ตัวแปร CSS มักจะกำหนดไว้ที่ระดับสไตล์ชีตมากกว่าที่ระดับองค์ประกอบแต่ละรายการ ซึ่งทำให้ยากต่อการเข้าถึงจากภายในโค้ด JavaScript

var element = document.getElementById("element");
element.style.setProperty("--variable", "new-value");

บรรทัดรหัสนี้กำลังตั้งค่าใหม่สำหรับตัวแปร CSS บรรทัดแรกรับองค์ประกอบด้วย ID ของ "องค์ประกอบ" บรรทัดที่สองตั้งค่าของตัวแปร CSS “–variable” เป็น “new-value”

ตัวแปร CSS

ตัวแปร CSS เป็นวิธีที่ยอดเยี่ยมในการจัดเก็บข้อมูลในไฟล์ CSS ของคุณโดยไม่ต้องใช้ตัวแปรส่วนกลาง คุณสามารถใช้เพื่อเก็บข้อมูลเช่นความกว้างหรือความสูงของหน้าปัจจุบันหรือขนาดแบบอักษรปัจจุบัน

หากต้องการใช้ตัวแปร CSS ในโค้ด JavaScript คุณต้องใส่คุณสมบัติ css ในสไตล์ชีตของเอกสารก่อน จากนั้น คุณสามารถกำหนดตัวแปรโดยใช้คีย์เวิร์ด var:

ความกว้าง var = document.getElementById("myElement").offsetWidth;

คุณยังสามารถใช้คุณสมบัติ css เพื่อเข้าถึงค่าแต่ละค่าจากตัวแปร:

var width = document.getElementById(“myElement”).offsetWidth; ความสูง var = document.getElementById("myElement").offsetHeight;

ควบคุม CSS

ใน JavaScript มีสองสามวิธีในการควบคุม CSS วิธีหนึ่งคือการใช้คุณสมบัติ css คุณสมบัตินี้ช่วยให้คุณตั้งค่าสไตล์สำหรับองค์ประกอบเฉพาะในเอกสารของคุณ

อีกวิธีในการควบคุม CSS คือการใช้คุณสมบัติสไตล์ คุณสมบัตินี้ช่วยให้คุณตั้งค่าสไตล์สำหรับองค์ประกอบทั้งหมดในเอกสารของคุณ