ಪರಿಹರಿಸಲಾಗಿದೆ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಸಿಎಸ್ಎಸ್ ವೇರಿಯೇಬಲ್ ಅನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು

ಎರಡು ಭಾಷೆಗಳು ವೇರಿಯಬಲ್ ನಿಯೋಜನೆ ಮತ್ತು ಕುಶಲತೆಯನ್ನು ವಿಭಿನ್ನ ರೀತಿಯಲ್ಲಿ ಸಮೀಪಿಸುವುದರಿಂದ ಈ ಪ್ರಶ್ನೆಗೆ ಒಂದೇ ಉತ್ತರವಿಲ್ಲ. ಸಾಮಾನ್ಯವಾಗಿ ಹೇಳುವುದಾದರೆ, ಆದಾಗ್ಯೂ, JavaScript ನೊಂದಿಗೆ CSS ವೇರಿಯೇಬಲ್ ಅನ್ನು ಬದಲಾಯಿಸಲು ಪ್ರಯತ್ನಿಸುವ ಒಂದು ಸಮಸ್ಯೆಯೆಂದರೆ, ಎರಡು ಭಾಷೆಗಳು ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಘೋಷಿಸಲು ಮತ್ತು ಪ್ರವೇಶಿಸಲು ವಿಭಿನ್ನ ಸಿಂಟ್ಯಾಕ್ಸ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ವಿಶಿಷ್ಟವಾಗಿ ಪ್ರತ್ಯೇಕ ಅಂಶದ ಮಟ್ಟಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಸ್ಟೈಲ್ ಶೀಟ್ ಮಟ್ಟದಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ, ಇದು JavaScript ಕೋಡ್‌ನಿಂದ ಪ್ರವೇಶಿಸಲು ಕಷ್ಟವಾಗಬಹುದು.

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

ಈ ಕೋಡ್ ಲೈನ್ CSS ವೇರಿಯೇಬಲ್‌ಗಾಗಿ ಹೊಸ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತಿದೆ. ಮೊದಲ ಸಾಲು "ಎಲಿಮೆಂಟ್" ನ ID ಯೊಂದಿಗೆ ಅಂಶವನ್ನು ಪಡೆಯುತ್ತದೆ. ಎರಡನೇ ಸಾಲು CSS ವೇರಿಯೇಬಲ್ "-ವೇರಿಯಬಲ್" ಮೌಲ್ಯವನ್ನು "ಹೊಸ-ಮೌಲ್ಯ" ಗೆ ಹೊಂದಿಸುತ್ತದೆ.

CSS ಅಸ್ಥಿರ

ಜಾಗತಿಕ ಅಸ್ಥಿರಗಳನ್ನು ಬಳಸದೆಯೇ ನಿಮ್ಮ CSS ಫೈಲ್‌ಗಳಲ್ಲಿ ಡೇಟಾವನ್ನು ಸಂಗ್ರಹಿಸಲು CSS ವೇರಿಯೇಬಲ್‌ಗಳು ಉತ್ತಮ ಮಾರ್ಗವಾಗಿದೆ. ಪ್ರಸ್ತುತ ಪುಟದ ಅಗಲ ಅಥವಾ ಎತ್ತರ ಅಥವಾ ಪ್ರಸ್ತುತ ಫಾಂಟ್ ಗಾತ್ರದಂತಹ ಮಾಹಿತಿಯನ್ನು ಸಂಗ್ರಹಿಸಲು ನೀವು ಅವುಗಳನ್ನು ಬಳಸಬಹುದು.

ನಿಮ್ಮ JavaScript ಕೋಡ್‌ನಲ್ಲಿ CSS ವೇರಿಯೇಬಲ್ ಅನ್ನು ಬಳಸಲು, ನೀವು ಮೊದಲು ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಸ್ಟೈಲ್ ಶೀಟ್‌ನಲ್ಲಿ css ಆಸ್ತಿಯನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ. ನಂತರ, ನೀವು var ಕೀವರ್ಡ್ ಬಳಸಿ ವೇರಿಯೇಬಲ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:

var ಅಗಲ = document.getElementById("myElement").offsetWidth;

ವೇರಿಯೇಬಲ್‌ನಿಂದ ವೈಯಕ್ತಿಕ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರವೇಶಿಸಲು ನೀವು css ಆಸ್ತಿಯನ್ನು ಸಹ ಬಳಸಬಹುದು:

var ಅಗಲ = document.getElementById("myElement").offsetWidth; var ಎತ್ತರ = document.getElementById("myElement").offsetHeight;

CSS ಅನ್ನು ನಿಯಂತ್ರಿಸಿ

JavaScript ನಲ್ಲಿ, CSS ಅನ್ನು ನಿಯಂತ್ರಿಸಲು ಕೆಲವು ಮಾರ್ಗಗಳಿವೆ. ಸಿಎಸ್ಎಸ್ ಆಸ್ತಿಯನ್ನು ಬಳಸುವುದು ಒಂದು ಮಾರ್ಗವಾಗಿದೆ. ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟ ಅಂಶಕ್ಕಾಗಿ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಲು ಈ ಆಸ್ತಿ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

CSS ಅನ್ನು ನಿಯಂತ್ರಿಸುವ ಇನ್ನೊಂದು ವಿಧಾನವೆಂದರೆ ಶೈಲಿಯ ಆಸ್ತಿಯನ್ನು ಬಳಸುವುದು. ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಅಂಶಗಳಿಗೆ ಶೈಲಿಯನ್ನು ಹೊಂದಿಸಲು ಈ ಆಸ್ತಿ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.